Question

我更愿意在没有内联脚本的情况下完成此操作。无论有没有jQuery，我都有兴趣学习这个。

尝试了几种不同的元素选择器方法，更改脚本标记的位置，然后尝试onclick，这就是我的代码的外观。

控制台正在返回错误＆＃34;无法读取属性＆＃39; addEventListener＆＃39; of null＆＃34;。

的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

为你创造了一个小提琴。希望这会有所帮助。

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函数？

3 个答案: