javascript - 我对 JS 还很陌生，看不到这个基本计算脚本的错误

Question

我从以下位置获取了代码 Calculate one variable based on changing input

我根据自己有限的理解写了以下内容

<td>
  <select name='breadstick'>
   <option value='0' selected >-- Choose Breadstick --</option>
   <option value='4.06'>Breadstick</option>
   <option value='3.8'>Melba Toast</option>
</select>
</td>
<td>
<input id="input_bread" type="text" name="input_bread" style="width:50px;" onkeyup="do_calc3(this.value);">
</td>
<td>
<input id="bread_results" class="" readonly name="bread_results" style="width:50px;" value="" />

<script>
function do_calc3() {
var bread_choice = document.getElementById('breadstick');
var bread_weight = document.getElementById('input_bread');
var bread_r = bread_choice * bread_weight;
document.getElementById("bread_results").value = bread_r;
}
</script>
</td> 

Answer 1

第一:

您需要使用.value用于获取元素值的属性。

更改:

var bread_r = bread_choice * bread_weight;

至:

var bread_r = bread_choice.value * bread_weight.value;

在您的原始代码中，bread_choice和bread_weight是对 DOM 元素的引用。当您尝试将它们相乘时，这不会是数字结果。

您正在尝试获取它们的值(在下拉列表中选择的内容以及在文本框中输入的内容)，因此您应该使用 .value 获取它们.

这与您的下一行类似，您在其中设置 bread_results元素的值 .value = bread_r .

第二:

您的<select>元素没有 id “面包棒”，它有一个 name 。因此，将您的元素更改为:

<select id='breadstick' name='breadstick'>

或将元素的检索更改为:

var bread_choice = document.querySelector('select[name="breadstick"]');

第三:

由于您正在使用 onkeyup 的内联事件处理程序，您已经通过了this.value ，这意味着文本框的值。因此，您不需要在函数中获取文本框及其值。只需添加一个参数并使用它即可。

function do_calc3(bread_weight) {
    var bread_choice = document.getElementById('breadstick').value;
    var bread_r = bread_choice * bread_weight;
    document.getElementById("bread_results").value = bread_r;
}

第四:

您不应该使用内联事件处理程序。由于多种原因，最好在 Javascript 代码中处理事件。这是我如何设置它的示例。 (请注意，onkeyup="do_calc3(this.value);" 已被删除并在 Javascript 的 window.onload 事件中完成)

function do_calc3() {
    var bread_choice = document.getElementById('breadstick');
    var bread_weight = this;
    var bread_r = bread_choice.value * bread_weight.value;
    if (isNaN(bread_r)) {
        bread_r = "Invalid";
    }
    document.getElementById("bread_results").value = bread_r;
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

window.onload = function () {
    var textbox = document.getElementById("input_bread");
    addEvent(textbox, "keyup", do_calc3);
};

演示: http://jsfiddle.net/Gtven/4/