我仍然有新的JS，不能看到我的错误了这个基本的计算脚本

我得到了代码 Calculate one variable based on changing input 我仍然有新的JS，不能看到我的错误了这个基本的计算脚本

我已经写了基于我有限的了解以下

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

来源

2013-04-17 Graham Doessel

第一个问题是存在与'ID = “面包条”'没有元素，它是一个'name'来代替。或者在''的句柄，就像['.querySelectorAll（）']（https://developer.mozilla.org /en-US/docs/DOM/Document.querySelectorAll）在现代浏览器中。可以用作'document.querySelectorAll（'select [name =“breadstick”]'）' – andyb

欢迎来到StackOverflow！如果您可以讨论具体出现的问题，以及您为解决问题所做的努力，那么人们可以更轻松地回答您的问题。 – ASGM

第一个：

您需要使用.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/

来源

2013-04-17 14:53:49 Ian

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

来源

2013-04-17 14:59:48

使用.value：

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

来源

2013-04-17 15:00:11

我仍然有新的JS，不能看到我的错误了这个基本的计算脚本

回答

相关问题