获取动态添加输入的输入值

Question

我有几个代码块。 第一个块将用户输入添加到表单中，第二个块尝试获取该数据以评估 switch 语句。 Bc javascript 读取所有脚本一次，我在块 2 中的 var 总是返回值null ； 该元素在 .js 运行时没有任何价值。 如何获取在 javascript 读取所有脚本后创建的输入元素的值？ 以下是重要部分的总结：

HTML：

  <div class="form-group">
     <label for="">Weight Classification:</label>
     <input type="text" class="form-control" id="weight-class" name="weight">
   </div> 

javascript：

<script>
  //prior code grabs height and weight and calcs BMI
  switch (BMI >= 16 && BMI < 43) {
    case (BMI >= 16 && BMI < 22):      
      document.getElementById("weight-class").setAttribute("value", "skinny");    
      break;

    case (BMI >= 22 && BMI < 25):
      document.getElementById("weight-class").setAttribute("value", "average");
      break;

    //other cases here...
     default:
     console.log("Error");
  } 
</script>

Javascript 块 2：

<script>
var weight = document.getElementById('weight-class').value; 

  switch (weight) {
    case (skinny):
      console.log("Successful, short");
    break;

    case (average):
      console.log("Successful, average");
    break;

    case (obese):
      console.log("Successful, tall");
    break;

    default:
      console.log("Failed all cases");
    break;
  }

</script>

Answer 1

您需要MutationObserver，因为您正在通过改变attribute更改输入的值，因此更改事件处理程序不会触发

 var weight = document.getElementById('weight-class'); // Create an observer instance with a callback function to execute when mutations are observed var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type == "attributes") { let weight = mutation.target.value; // get the value. switch (weight) { case ('skinny'): console.log("Successful, short"); break; case ('average'): console.log("Successful, average"); break; case ('obese'): console.log("Successful, tall"); break; default: console.log("Failed all cases"); break; } } }); }); // Start observing the target node for attribute mutations observer.observe(weight, { attributes: true //configure it to listen to attribute changes }); weight.addEventListener('change', function() { let weight = this.value; console.log('this gets fired when you change the value via input') }) //lets set the BMI var BMI = 17 + Math.random() * 7; switch (BMI >= 16 && BMI < 43) { case (BMI >= 16 && BMI < 22): document.getElementById("weight-class").setAttribute("value", "skinny"); break; case (BMI >= 22 && BMI < 25): document.getElementById("weight-class").setAttribute("value", "average"); break; //other cases here... default: console.log("Error"); console.log(BMI); }

 <div class="form-group"> <label for="">Weight Classification:</label> <input type="text" class="form-control" id="weight-class" name="weight"> </div>

Answer 2

document.addEventListener("change", function(){
  var weight = document.getElementById("weight-class").value; 
 
  switch (weight) {
    case "skinny":
      //do something
      break;

    case "average":
      //do something
      break;
    
    case "obese":
      //do something
    break;

    default:
    console.log("Error");
  }  
});