将 html 输入传递给 js 函数？

Question

我更愿意在没有内联脚本的情况下完成此操作。无论有没有 jQuery.

，我都有兴趣学习这个

在尝试了几种不同的元素选择器方法、更改我的脚本标记的位置并尝试了 onclick 之后，这就是我的代码的样子。

控制台返回错误 "Cannot read property 'addEventListener' of null"。

javascript:

    document.getElementById("button").addEventListener("click", someFunction(document.getElementById("number").value));

someFunction(){};

Html:

<head>
    <script src="nibble.js"></script>
</head>
<body>
    <form>
        <input type="number" id="number" name="number" ></input>
        <input type="button" id="button" name="button" value="Test number"></input>
    </form>
</body>
</html>

Answer 1

您的脚本需要放在 html 下方（或包裹在 window.onload 中）以便在运行时查找元素。此外，您的 addEventListener 是错误的，现在它不是被调用的函数，而是 undefined。像这样尝试：

document.getElementById("button").addEventListener("click", someFunction);

function someFunction(){
    alert(document.getElementById("number").value)
};

HTML:

<head>

</head>
<body>
    <form>
        <input type="number" id="number" name="number" ></input>
        <input type="button" id="button" name="button" value="Test number"></input>
    </form>
    <script src="nibble.js"></script>
</body>
</html>

Answer 2

为您创建了一个 fiddle。希望这会有所帮助。

http://jsfiddle.net/mfLt7/96/

$(document).ready(function(){


 document.getElementById('button').addEventListener('click', someFunction);


function someFunction(){
 var value = document.getElementById('number').value;
 alert(value);

}

});

希望对您有所帮助。快乐学习

Answer 3

看看我刚做的这个fiddle。您将 someFunction 传递给 addEventListener 调用的方式是错误的，因为您是在调用函数而不是将它的引用传递给事件侦听器，因此它可以决定自己调用它。

函数如下所示：

document.getElementById("button").addEventListener("click", someFunction);

function someFunction(){ 
    document.querySelector('.output').innerHTML = document.getElementById("number").value 
};

将 html 输入传递给 js 函数？

Pass html input into a js function?

html

javascript

jquery

onclick

addeventlistener