我仍然是JS的新手，不能看到我在这个基本计算脚本上的错误

I am still new with JS and can't see my mistake for this basic calculation script

本文关键字：脚本 错误 计算 JS 仍然是 新手 不能      更新时间：2023-09-26

我从根据输入

的变化计算一个变量

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

<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>

First:

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

改变:

var bread_r = bread_choice * bread_weight;

: 

var bread_r = bread_choice.value * bread_weight.value;

在原始代码中，bread_choice和bread_weight是对DOM元素的引用。当你试图将它们相乘时，不会得到数值结果。

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

它类似于你的下一行，你用.value = bread_r设置 bread_results元素的值。

第二:

你的<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/

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

上面的

需要更改，因为您还没有id "breadstick"。下面是修改后的函数，以便获得元素的实际值，而不仅仅是元素的值。

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/

使用.value:

var bread_choice = document.getElementById('breadstick').value;
var bread_weight = document.getElementById('input_bread').value;
相关文章：