Почему функция дает только значение первого входа? - PullRequest
Новая
       80

Почему функция дает только значение первого входа?

1 голос
/ 04 мая 2020

Всякий раз, когда я пытаюсь нажать на цвета, он дает только «Белый», но не хочет показывать другие значения на экране.

Я не понимаю, что я делаю здесь неправильно , 

var x = document.getElementById("mySelect").value;
function myFunction() {
  document.getElementById("text").innerHTML = "Achtergrondkleur is: " + x;
}
<table BORDER="4">
  <tr>
    <td colspan="2" class="kleur">Selecteer een kleur!</td>
  </tr>
  <tr class="radio">
    <td onchange="myFunction()">
      <input id="mySelect" value="Wit" type="radio" class="color">Wit <br>
      <input id="mySelect" value="Grijs" type="radio" class="color">Grijs <br>
      <input id="mySelect" value="Groen" type="radio" class="color">Groen <br>
      <input id="mySelect" value="Geel" type="radio" class="color">Geel <br>
      <input id="mySelect" value="Rood" type="radio" class="color">Rood <br>
      <input id="mySelect" value="Blauw" type="radio" class="color">Blauw <br>
      <input id="mySelect" value="Zwart" type="radio" class="color">Zwart <br>
    </td>
    <td>
      <div class="circle"></div>
    </td>
  </tr>
  <tr class="radio">
    <td colspan="2">
      <p id="text"></p>
    </td>
  </tr>
</table>

Ответы [ 2 ]

1 голос
/ 04 мая 2020

В вашем коде есть некоторые проблемы:

  • id должно быть уникальным на странице, поэтому вы должны заменить его на name;
  • , который необходимо добавить click - прослушиватель событий для ваших элементов с помощью mySelect name. 

document.getElementsByName("mySelect").forEach(mySelect => {
  mySelect.addEventListener("click", function() {
    if (this.checked) {
      document.getElementById("text").innerHTML = "Achtergrondkleur is: " + this.value;
    }
  });
});
<table BORDER="4">
  <tr>
    <td colspan="2" class="kleur">Selecteer een kleur!</td>
  </tr>
  <tr class="radio">
    <td>
      <input name="mySelect" value="Wit" type="radio" class="color">Wit <br>
      <input name="mySelect" value="Grijs" type="radio" class="color">Grijs <br>
      <input name="mySelect" value="Groen" type="radio" class="color">Groen <br>
      <input name="mySelect" value="Geel" type="radio" class="color">Geel <br>
      <input name="mySelect" value="Rood" type="radio" class="color">Rood <br>
      <input name="mySelect" value="Blauw" type="radio" class="color">Blauw <br>
      <input name="mySelect" value="Zwart" type="radio" class="color">Zwart <br>
    </td>
    <td>
      <div class="circle"></div>
    </td>
  </tr>
  <tr class="radio">
    <td colspan="2">
      <p id="text"></p>
    </td>
  </tr>
</table>
0 голосов
/ 04 мая 2020

Эта строка 

var x = document.getElementById("mySelect").value;

просто даст вам первый элемент, потому что вы использовали один и тот же идентификатор для каждого элемента. Вы должны дать каждому элементу уникальный идентификатор.

...