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

DEMO： http://jsfiddle.net/Gtven/4/

Answer 2

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

上面需要更改，因为你还没有id“面包棒”。下面是一个更改的函数，以获取元素的实际值，而不仅仅是元素。

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

在这里，我找到了一个工作小提琴：http://jsfiddle.net/TwqC6/

Answer 3

使用.value：

var bread_choice = document.getElementById('breadstick').value;
var bread_weight = document.getElementById('input_bread').value;

我仍然是JS的新手，无法看到我对这个基本计算脚本的错误

3 个答案: