<分区>
我昨天发布了一个类似的问题并得到了一些有用的回复，但我现在遇到的问题略有不同。当用户更改 UI 上的 type 时，类将添加到 html 元素(这只是在元素周围添加了一个蓝色边框)。我没有收到任何错误消息，但它什么也没做。
document.querySelector(DOM.inputType).addEventListener('change', function() {
if (usersInput.type === "Health") {
document.querySelector('.input_type').className += " blue";
document.querySelector('.input_activity').className += " blue";
document.querySelector('.input_time').className += " blue";
document.querySelector('.input_end').className += " blue";
document.querySelector('.input_btn').className += " blue_btn";
}
});.blue {
border: 2px solid blue !important;
}
.blue_btn {
color: blue;
}<div class="input">
<select class="input_type" id="input_type" name="input_type" style="height:36px" placeholder="Type" required>
</select>
<input class="input_activity" type="text" name="activity" placeholder="What do you need to do?" size="60" style="height:32px" required>
<select class="input_time" name="Time" style="height:36px" required>
<option value="Start">Start</option>
</select>
<select class="input_end" name="end" style="height:36px" required>
<option value="End">End</option>
</select>
<input class="input_btn" type="button" value="Submit!">
</div>这是 usersInput 的来源:
var usersInput = UICtrl.getInput();
这是“getInpu”的来源:
return {
getInput: function() {
return {
type: document.querySelector(DOMstrings.inputType).value,
activity: document.querySelector(DOMstrings.inputActivity).value,
startTime: document.querySelector(DOMstrings.inputStart).value,
endTime: document.querySelector(DOMstrings.inputEnd).value
};
},
},
这些是从“类型”下拉菜单中选择的选项:
<select class="input_type" id="input_type" name="input_type" style="height:36px" placeholder="Type" required>
<option value="">Type</option>
<option value="health">Health</option>
<option value="work">Work</option>
<option value="leisure">Leisure</option>
</select>
请注意，我已经在论坛上查看过类似的问题，但我发现没有一个能真正回答我的问题。在此先感谢您的支持!