0

我从 根据更改输入计算一个变量中获得了代码

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

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

3 回答 3

2

第一的：

您需要使用该.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);"已在 Javascriptwindow.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/

于 2013-04-17T14:53:49.390 回答
0

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

于 2013-04-17T14:59:48.080 回答
0

使用.value：

var bread_choice = document.getElementById('breadstick').value;
var bread_weight = document.getElementById('input_bread').value;
于 2013-04-17T15:00:11.240 回答