使用Javascript动态设置onKeyUp属性_Javascript_Html

使用Javascript动态设置onKeyUp属性

javascript html

使用Javascript动态设置onKeyUp属性,javascript,html,Javascript,Html,我目前正在编写一个jscode来计算数字输入的运行总数。我的问题是，对于我的实际项目，我不能直接更改HTML，因为它是由脚本程序生成的。不过，我可以使用JS操作它到目前为止，我已经添加了一个div，它可以显示输入的总和。但这仅在输入具有onKeyUp（）属性时有效。对于生成的HTML，这是不正确的，因此我需要编写一个JS脚本，将其添加到中。这就是我到目前为止所做的： <html> <head> <script> //try to set an onK

我目前正在编写一个

jscode

来计算数字输入的运行总数。我的问题是，对于我的实际项目，我不能直接更改HTML，因为它是由脚本程序生成的。不过，我可以使用

JS

操作它

到目前为止，我已经添加了一个div，它可以显示输入的总和。但这仅在输入具有

onKeyUp（）

属性时有效。对于生成的HTML，这是不正确的，因此我需要编写一个

JS脚本

，将其添加到中。这就是我到目前为止所做的：

<html>
<head>
<script>
    //try to set an onKeyUp attribute to the elements.
    var number1 = document.getElementById("_Q0_Q0_Q0");
    number1.onkeyup = function(){ return summer()};

    var number2 = document.getElementById("_Q0_Q0_Q1");
    number2.onkeyup = function(){ return summer()};

    var number3 = document.getElementById("_Q0_Q0_Q2");
    number3.onkeyup = function(){ return summer()};

    function summer() {
        var count = 0; //start with nothing
        var num1 = (parseFloat(document.getElementById("_Q0_Q0_Q0").value)) || 0; //if there aren't any numbers, add nothing
        var num2 = (parseFloat(document.getElementById("_Q0_Q0_Q1").value)) || 0;
        var num3 = (parseFloat(document.getElementById("_Q0_Q0_Q2").value)) || 0;
        count = num1+num2+num3; //sum them up
        if (!document.getElementById("output")) { //check to see if there is a div with the output already, if not create one.
        var newDiv = document.createElement('div');
        newDiv.setAttribute('id', 'output');
        var gutterDiv = document.getElementById("right_gutter")
        gutterDiv.appendChild(newDiv);
        };
        document.getElementById("output").innerHTML = "Your running total = "+count
}; //show output
</script>
</head>
<body>
<input type="text" id="_Q0_Q0_Q0" name="number" />
<input type="text" id="_Q0_Q0_Q1" name="number" />
<input type="text" id="_Q0_Q0_Q2" name="number" />
<div id='right_gutter'>
<button type="button" onclick="summer()">Clicking here adds your input to the "count" variable</button> //two purposes of this. 1) Acts as a placeholder for where the output should end up. 2) Shows that the summing function works.
</div>
<br>
</body>
</html>


//尝试为元素设置onKeyUp属性。
var number1=document.getElementById（“'uQ0'uQ0'uQ0”）；
number1.onkeyup=function（）{return summer（）}；
var number2=document.getElementById（“\u Q0\u Q0\u Q1”）；
number2.onkeyup=函数（）{return summer（）}；
var number3=document.getElementById（“'uQ0'uQ0'uQ2”）；
number3.onkeyup=function（）{return summer（）}；
函数summer（）{
var count=0；//从零开始
var num1=（parseFloat（document.getElementById（“Q0_Q0_Q0”）.value））| | 0；//如果没有任何数字，则不添加任何内容
var num2=（parseFloat（document.getElementById（“'u Q0_Q0_Q1”）.value））|0；
var num3=（parseFloat（document.getElementById（“'u Q0_Q0_Q2”）.value））|0；
count=num1+num2+num3；//求和
如果（！document.getElementById（“output”）{//检查是否已经有一个带有输出的div，如果没有，则创建一个。
var newDiv=document.createElement（'div'）；
setAttribute（'id'，'output'）；
var gutterDiv=document.getElementById（“右槽”）
gutterDiv.appendChild（newDiv）；
};
document.getElementById（“输出”）.innerHTML=“您的跑步总量=”+count
}; //显示输出
单击此处将您的输入添加到“count”变量//有两个目的。1） 充当输出结束位置的占位符。2） 显示了求和函数的工作原理。

很高兴您能使用它。我想这是多余的，但我张贴这个答案，以防它是有用的

//Create a NodeList of all elements whose name='number':
var nums = document.getElementsByName("number"); 

//add the onkeyup event to all nums:
for(var n=0; n < nums.length; n++){
    nums[n].onkeyup = function(){return summer()};
}

//add the click event to the button:
document.getElementById("button").onclick = function(){return summer();}


function summer() {
    var count = 0;
    for(var n=0; n < nums.length; n++){//iterate and sum values
        count += parseFloat(nums[n].value) || 0;
    }
    //create the output element:
    var outputDiv = document.getElementById("output") || document.createElement('div');
    //if it doesnt already exist append it:
    if(!document.getElementById("output")){
            outputDiv.setAttribute('id', 'output');
            document.getElementById("right_gutter").appendChild(outputDiv);
            createdAlready=true;
        }
    //set the output string:
    outputDiv.innerHTML = "Your running total = "+count;
}

//为name='number'的所有元素创建节点列表：
var nums=document.getElementsByName（“编号”）；
//将onkeyup事件添加到所有NUM：
对于（var n=0；n


演示：
很高兴您能使用它。我想这是多余的，但我张贴这个答案，以防它是有用的
//Create a NodeList of all elements whose name='number':
var nums = document.getElementsByName("number"); 

//add the onkeyup event to all nums:
for(var n=0; n < nums.length; n++){
    nums[n].onkeyup = function(){return summer()};
}

//add the click event to the button:
document.getElementById("button").onclick = function(){return summer();}


function summer() {
    var count = 0;
    for(var n=0; n < nums.length; n++){//iterate and sum values
        count += parseFloat(nums[n].value) || 0;
    }
    //create the output element:
    var outputDiv = document.getElementById("output") || document.createElement('div');
    //if it doesnt already exist append it:
    if(!document.getElementById("output")){
            outputDiv.setAttribute('id', 'output');
            document.getElementById("right_gutter").appendChild(outputDiv);
            createdAlready=true;
        }
    //set the output string:
    outputDiv.innerHTML = "Your running total = "+count;
}

//为name='number'的所有元素创建节点列表：
var nums=document.getElementsByName（“编号”）；
//将onkeyup事件添加到所有NUM：
对于（var n=0；n

演示：
如果正确，则不需要舒尔，但不需要太多代码
js
html


范例
如果正确，则不需要舒尔，但不需要太多代码
js
html


范例
事件处理程序区分大小写，因此它应该是onkeyup
。HTML不区分大小写，因此您可能会看到：
但这在JavaScript中不起作用。将其更改为onkeyup，但似乎仍然不起作用您正在将脚本包括在head标记中。它将在DOM完全就绪之前执行。也许您可以使用window.onload
？它应该动态更改一个变量，该变量显示用户在文本框中输入的数字的总和。最终产品应对照前面给出的值检查此合计值，以查看它们是否匹配。（例如，你说你一周吃这么多顿饭，但你告诉我你吃x顿早餐、y顿午餐和z顿晚餐，它们的总和=/=总数）事件处理程序区分大小写，因此它应该是onkeyup
。HTML不区分大小写，因此，您可能会看到：
但这在JavaScript中不起作用。将其更改为onkeyup但似乎仍然不起作用您正在将脚本包括在head标记中。它将在DOM完全就绪之前执行。也许您可以使用window.onload？它应该动态更改一个变量，该变量显示用户在文本框中输入的数字的总和。最终产品应对照前面给出的值检查此合计值，以查看它们是否匹配。（例如，你说你一周吃这么多顿饭，但你告诉我你吃x顿早餐、y顿午餐和z顿晚餐，其总和=/=总数）
<form><input name="a"><input name="b"><input name="c"></form>
<div id="result"></div>