Что не так с этим кодом? Почему это не работает так, как я надеялся? - PullRequest
Новая
       0

Что не так с этим кодом? Почему это не работает так, как я надеялся?

0 голосов
/ 21 апреля 2019

Терпите меня, ребята .. Я новичок в 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>```

Ответы [ 3 ]

2 голосов
/ 21 апреля 2019

Вам нужно изменить 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>
0 голосов
/ 21 апреля 2019 
   <button onclick="red()">Red</button>
   <button onclick="green()">Green</button>
   <button onclick="blue()">Blue</button>

Пожалуйста, замените onclick вместо onsubmit.

0 голосов
/ 21 апреля 2019

Вам нужно изменить 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")
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...