html 按钮不会调用带有 id 的函数

问题描述 投票：0回答：5

我正在学习 html css 和 js 我是一个真正的初学者 在视频中，我看到讲师使用 id 通过它调用的函数更改颜色 这里的 html 是讲师展示的，但它仍然对我不起作用......

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
    function init(){
      declareEvents();
      
    }
    
    function declareEvents(){

         document.querySelector("#orange_btn").onclick = changeH1Orange;


    }

    function changeH1Red()
    {
        document.querySelector("#id_h1").style.background = "red";
    }

    function changeH1Blue()
    {
        document.querySelector("#id_h1").style.background = "blue";
    }

    function changeH1Green()
    {
        document.querySelector("#id_h1").style.background = "green";
    }

    function changeH1Orange()
    {
        document.querySelector("#id_h1").style.background = "orange";
    }
    </script>
</head>
<body onload="init">
     <h1 id="id_h1">choose color you like</h1>
     <button onclick="changeH1Red()">Red</button>
     <button onclick="changeH1Blue()">Blue</button>
     <button onclick="changeH1Green()">Green</button>   
     <button id ="orange_btn">orange</button>   
   
</body>
</html>

我期待橙色按钮将标题更改为橙色

javascript html css button
5个回答
2
投票

你只是忘了

(
)

<body onload="init()">

但是建议在脚本中附加事件监听器

document.addEventListener('DOMContentLoaded', init)
1
投票

最重要的是，您缺少

onload ="init"
处的括号。 不过一般来说
addEventListener()
比较好用。使用 
.onclick =
会覆盖添加到按钮的任何其他 onlick 函数。

function declareEvents() {
      document.querySelector("#orange_btn").addEventListener("click", changeH1Orange);
}

如果你愿意，你也可以使用像

这样的事件监听器来替换
onload ="init()"

window.addEventListener("load", declareEvents);
0
投票

代码的问题似乎是您没有在 body 标签的 onload 事件中正确调用 init 函数。需要在函数名后加上圆括号()才能调用。 因此，您可以将 onload="init" 替换为 onload="init()"。这将在页面加载并初始化事件侦听器时调用 init() 函数。

0
投票

即使你将“init”设置为“body”的“onload”属性的值，你写的时候没有括号，因此没有调用init函数。

你必须在最后的第九行这样写 

<body onload="init()">
。然后它会起作用。

这里确实有一个容易混淆的地方：你在JS中定义onclick的时候，你写的函数名没有括号（也没有引号） 

element.onclick = myFunction
但是当你在 HTML 中定义它时（即使你通过 setAttribute 方法在 JS 中定义它）你写的时候用引号和括号 
onclick = "myFunction()"
.

0
投票

如果你必须这样做，我的回答将不会被接受。 如果不是，你可以避免很多无用的代码。并使用 EventListeners！ 一个改变颜色的功能就足够了。

添加的

<div id="buttonList">
允许您仅检索此 div 中的所有按钮标签。

            window.addEventListener("DOMContentLoaded",init);
            function init(){
                 var list = document.getElementById("buttonList");
                 var buttons = list.getElementsByTagName("button");
                 for(var o in buttons){
                     if(typeof buttons[o] === "object"){
                     buttons[o].addEventListener("click",setColor);
                     }
                 }
            }
            function setColor(e){
                document.querySelector("#id_h1").style.backgroundColor = this.name;
            }
     <h1 id="id_h1">choose color you like</h1>
     <div id="buttonList">
     <button name="red">Red</button>
     <button name="blue">Blue</button>
     <button name="green">Green</button>
     <button name="orange">orange</button> 
     </div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.