Блог

Я создаю игру в кости, используя HTML5 и JavaScript.

Я хочу, чтобы игрок мог выбирать кости одним щелчком мыши. Это остановит бросание кубика. Игрок должен иметь возможность повторно нажать на кнопку dice, что позволит снова бросить кости.

Я поиграл с кодом, и первый onclick работает, а второй onclick — нет.

Является ли это ограничением в один щелчок на кнопку ввода или мне следует использовать другой HTML-тег, отличный от кнопки ввода?

Я хочу, чтобы игра воспроизводилась без перезагрузки экрана.

HTML5

 <tr>
<th><input type="button" id="diceOne" onclick="selectDice(this.id,this.value)" value="0"></input></th>

<th><input type="button" id="diceTwo" onclick="selectDice(this.id,this.value)" value="1"></input></th>

<th><input type="button" id="diceThree" onclick="selectDice(this.id,this.value)" value="2"></input></th>

<th><input type="button" id="diceFour" onclick="selectDice(this.id,this.value)" value="3"></input></th>

<th><input type="button" id="diceFive" onclick="selectDice(this.id,this.value)" value="4"></input></th>
</tr>
  

Javascript

 function selectDice(diceName,diceValue){
if (diceArray[diceValue][1]=="y"){
    alert(diceArray[diceValue][1]);
    document.getElementById(diceName).value = "Die now selected";
    diceArray[diceValue][1]="n";
    alert(diceArray[diceValue][1]); 
} 
else {
    alert(diceArray[diceValue][1]); 
    document.getElementById(diceName).value = "Die not selected";
    diceArray[diceValue][1]="y";
    alert(diceArray[diceValue][1]); 
}

}
  

Похоже, у вас ошибка в коде. Я думаю, что это то, что происходит:

1. Вы нажимаете на первый кубик, что приводит к вызову selectDice, передавая идентификатор для diceName и значение для diceValue; или «diceOne» и «0» соответственно.
2. По какому бы пути инструкции if он ни следовал, вы создаете document.getElementById(diceName), который будет получать элемент ввода, на который вы нажали (в данном случае, первый элемент ввода), и изменяет значение либо на «Die now selected», либо на «Die not selected». Именно здесь все идет не так.
3. В следующий раз, когда вы нажимаете на этот кубик, он вызывает selectDice и снова передает идентификатор для diceName и значение для diceValue … за исключением того, что на этот раз diceName — «diceOne», а diceValue — «Кубик, выбранный сейчас». Поскольку у вас нет значения для индекса «Die now selected» в объекте diceArray, отсюда все идет под откос.

Я бы посоветовал попробовать этот код без строк «document.getElementById(diceName).value = …» и посмотреть, сработает ли это тогда. Если вам действительно нужно изменить значение элемента ввода в вашем onclick, то я бы предложил либо не использовать встроенный onclick, либо передать нужное литеральное значение для diceName и diceValue следующим образом:

 <input type="button" id="diceOne" onclick="selectDice('diceOne','0')" value="0"></input>    
  

создайте переменные для каждой из этих кнопок и активируйте их значение true / false для каждого нажатия в вашем javascript в качестве условия, и это должно исправить ваш второй щелчок 😉