用户更改类型时添加新类[重复]

Question

我昨天发布了一个类似的问题并得到了一些有用的回复，但我现在遇到的问题略有不同。当用户在 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>

请注意，我在论坛上检查过类似的问题，但我发现没有一个真正回答了我的问题。提前感谢您的支持！

Answer 1

这应该可以满足您的需求，但这取决于您的<option> 在<select> 元素中的外观。 在我的示例中，它们看起来像这样。但我只是假设这一点，因为原始帖子中的这些信息：

<option value="">Please select</option>
<option value="Health">Health</option>
<option value="Soemthing">Soemthing</option>

在下面的代码中，我使用

检查<option> 的值

...      
if (this.value === "Health") {
...

但您也可以使用

检查 <option> 值的文本

...
if (this.options[this.selectedIndex].text == "Health") {
...

查看并检查代码

var element = document.getElementById('input_type');
if(element !== null) {
  element.addEventListener('change', function() {
    if (this.value === "Health") {
      document.querySelector('.input_type').classList.add('blue');
      document.querySelector('.input_activity').classList.add('blue');
      document.querySelector('.input_time').classList.add('blue');
      document.querySelector('.input_end').classList.add('blue');
      document.querySelector('.input_btn').classList.add('blue');
    }
    else {
    	document.querySelector('.input_type').classList.remove('blue');
      document.querySelector('.input_activity').classList.remove('blue');
      document.querySelector('.input_time').classList.remove('blue');
      document.querySelector('.input_end').classList.remove('blue');
      document.querySelector('.input_btn').classList.remove('blue');
    }
  });
}

.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>
    <option value="">Please select</option>
    <option value="Health">Health</option>
    <option value="Soemthing">Soemthing</option>
  </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>

Answer 2

这是因为没有像usersInput 这样的东西。 usersInput 未定义，因此无法匹配您的 if 条件，这就是它不起作用的原因。为了获得用户选择的值，您可以使用this.value。因此，您的代码需要在这里稍作调整。而不是这个

if (usersInput.type === "Health") {

改成这个

if (this.value === "Health") {

Answer 3

很难确切地说出问题出在哪里，因为我看不到你的 JS 的不同部分在哪里运行......但是，我最好的猜测是：

1. 您的select 元素上的值设置不正确（您的选项在提供的HTML 中不可见，我假设它们是通过一些JS 添加的？）。您的选项需要具有“健康”值：

    <option value="Health">Health<option>

1. 你打错电话了：

   var usersInput = UICtrl.getInput();

尝试将此函数作为事件侦听器中的第一行调用，这是因为您想在特定时间获取 DOM 状态：

document.querySelector(DOM.inputType).addEventListener('change', function() {
  var usersInput = UICtrl.getInput();

  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";
  }
});

1. DomStrings 对象属性或DOM.inputType 属性存在拼写错误。

Answer 4

在大家的帮助下我已经解决了！我应该使用usersInput.type 而不是usersInput.value。 var usersInput = UICtrl.getInput(); 也需要在事件侦听器函数中。我一直认为事件侦听器函数本质上是闭包，因此应该可以访问外部函数变量...也许我错了！

这是新的 JS 代码：

var element = document.getElementById('input_type');
if (element !== "Type") {
    element.addEventListener('change', function() {
        var usersInput = UICtrl.getInput();
        if (usersInput.type === "health") {
            document.querySelector('.input_type').classList.add('blue');
            document.querySelector('.input_activity').classList.add('blue');
            document.querySelector('.input_time').classList.add('blue');
            document.querySelector('.input_end').classList.add('blue');
            document.querySelector('.input_btn').classList.add('blue');
        }
    });
}