Question

为什么我的onclick不会覆盖之前执行的js函数？该函数从php中的echo中触发。该函数被执行并更改图像及其宽度和高度。稍后，如果我点击我的按钮，我希望图像再次改变，但只有图像改变而不是宽度和高度。

<script>
     function helmfunc() {            
                document.getElementById("helmplace").src = "helmimg/s_helmet.png";  //executes                               
    document.getElementById("helmplace").style.width = "22px"; //executes
    document.getElementById("helmplace").style.height = "31px"; //executes                    
                }
</script>
<img id="helmplace" name="showh" src="redx3.png" width="25" height="30" />
<span onclick="showh.src = x_helm.src; showh.width = x_helm.width; showh.height = x_helm.height; helm.value = 'x helm'">
                <il>
                    <img id="xhelmid" name="x_helm" src="helmimg/x_helmet.png" width="22" height="31" />x Helm
                </il>
            </span>

在一些php中:(身体最下方）

echo '<script type="text/javascript"> slayerhelmfunc(); </script>';

Answer 1

而不是使用onclick，在点击上运行代码的普遍接受的方法是使用事件侦听器。这是一个例子：

<!DOCTYPE html>
<html>
<body>

	<input type="number" id="inputInteger" />
	<input type="submit" id="btnSubmit" text="Submit" />
    
    <p id="result"></p>

	<script type = "text/javascript">
        // Event Listener that Runs "Compute()" on a Click
        document.getElementById("btnSubmit").addEventListener("click", compute);

        // Gets Input Value and Displays it in a <p>
        function compute() {
            var day = document.getElementById("inputInteger").value;
            document.getElementById("result").innerHTML = day;
        }
    </script>
</body>
</html>

为什么我的onclick不会覆盖先前执行的js函数？

1 个答案: