Question

和我一起忍受..我是JavaScript和StackOverflow的新手...

这是我的问题：

我创建了一个简单的代码，带有3个按钮，当按下这些按钮时，它们应该更改文本（innerHTML）...但是它不起作用。：-（

我在做什么错了？

我已经检查了W3Schools的线索。但是没有骰子。

<head>
  <title>JavaScript Table</title>
  <style>
    body{
        text-align: center;
        font-family: arial;
    }
  </style>
        <script>
            function red(){
                document.getElementById("tekst").innerHTML = "Red";
            }
            function green(){
                document.getElementById("tekst").innerHTML = "Green";
            }
            function blue(){
                document.getElementById("tekst").innerHTML = "Blue";
            }
        </script>
</head>
<body>
        <h2 id="tekst">Color</h2>
        <button onsubmit="red()">Red</button>
        <button onsubmit="green()">Green</button>
        <button onsubmit="blue()">Blue</button>     
</body>
</html>```

Answer 1

您需要将onsubmit更改为onclick。

您可以使用addEventListener来缩短代码。您可以创建文本数组，并使用forEach循环向按钮添加侦听器，以将文本更改为特定索引处的数组元素。

const arr = ["Red","Green","Blue"]
const h2 = document.querySelector('#tekst');
document.querySelectorAll('button').forEach((x,i) => {
  x.addEventListener('click',() => h2.innerHTML = arr[i])
})

<head>
  <title>JavaScript Table</title>
  <style>
    body{
        text-align: center;
        font-family: arial;
    }
  </style>
        <script>
            
        </script>
</head>
<body>
        <h2 id="tekst">Color</h2>
        <button>Red</button>
        <button>Green</button>
        <button>Blue</button>     
</body>

Answer 2

您需要将onsubmit更改为onclick。您还可以在脚本中添加事件：

HTML：

<h2 id="text">Color</h2>
<button id="red">Red</button>
<button id="green">Green</button>
<button id="blue">Blue</button>`

JavaScript：

document.getElementById("red").addEventListener("click", () => 
document.getElementById("text").innerHTML = "RED")

document.getElementById("green").addEventListener("click", () => 
document.getElementById("text").innerHTML = "GREEN")

document.getElementById("blue").addEventListener("click", () => 
document.getElementById("text").innerHTML = "BLUE")

Answer 3

   <button onclick="red()">Red</button>
   <button onclick="green()">Green</button>
   <button onclick="blue()">Blue</button>

请用onclick代替onsubmit。

此代码有什么问题？为什么它不按我希望的方式工作？

3 个答案: