Trigger function on click for hangman game

Я новичок в JavaScript и пытаюсь закодировать эту игру Hangman, но у меня проблемы. То, что я должен далеко следующее:Trigger function on click for hangman game

Мой HTML:

<div class="col-md-4"> 
    <div id="placeHolder">_ _ _ _ _ _</div> 
    <div id="gamestatus"></div> 
    <input type="text" size="1" id="letterGuess" maxlength="1"> 
    <button id="button" onclick="guess()">Press to start</button> 
</div>

Мои JavaScript:

var dictionary = ['music', 'mountain', 'forest', 'florida', 'sweden', 'golf']; 
var wordUsed, input, placeHolder; 

function startGame() 
{ 
    placeHolder = ""; 
    var totalGuesses = 10; 
    wordUsed = dictionary[Math.floor(Math.random() * dictionary.length)]; 
    console.log(wordUsed); 

    var buttonText = document.getElementById("button").innerHTML = "Guess"; 

    for(var i = 0; i < wordUsed.length; i++) 
    { 
     placeHolder += "_ "; 
    } 

    document.getElementById("placeHolder").innerHTML = placeHolder; 
    document.getElementById("gamestatus").innerHTML = "Game is in progress."; 

} 

function guess() 
{ 
    var correctGuess = false; 
    var ip = document.getElementById("letterGuess"); 
    input = ip.value; 

    for(var i = 0; i < wordUsed.length; i++) 
    { 
     if(input == wordUsed.substring(i, i + 1)) 
     { 
      correctGuess = true; 
      placeHolder = placeHolder.substring(0, i) + input + placeHolder.substring(i + 1, placeHolder.length + 1); 
      document.getElementById("placeHolder").innerHTML = placeHolder; 
     } 
    } 
    if(!correctGuess) 
    { 
     totalGuesses--; 
    } 
    if(placeHolder == wordUsed) 
    { 
     alert("You WIN!"); 
    } 
    if(totalGuesses == 0) 
    { 
     alert("You LOSE!") 
     startGame(); 
    } 
} 
startGame(); 
document.getElementById("button").onclick = guess;

Таким образом, код правильно выбрать слово и поместить правильное количество подчеркиваний в местах букв; но ничего не происходит, когда я запускаю свой код. Я мог бы пересмотреть что-то очень простое, и было бы очень полезно, если бы кто-нибудь мог указать, что не так с кодом/логикой.

Также будут оценены любые другие советы о том, как улучшить код/логику! Благодарю.

источник

2016-07-01 LearningJS888

Последняя строка в коде:

document.getElementById("button").onclick = letterGuess;

Вы не объявили letterGuess() в качестве функции. Вы, наверное, хотите что-то вроде этого:

document.getElementById("button").addEventListener("click", guess);

Это будет выполнять вашу guess() функцию на каждый клик по кнопке. Кроме того, вы можете/должны удалить атрибут onclick="" от <button>

Работает jsfiddle. Правильно ли настроен ваш html и действительно ли вы загружаете скрипт?

Ваш HTML должен выглядеть следующим образом:

<!DOCTYPE html> 
<html> 
<head></head> 

<body> 
    <!-- your game html --> 
    <script type="text/javascript" src="game.js"></script> 
</body> 
</html>

Если letterGuess просто опечатка, пожалуйста console.log() что-то в вашей guess() функции, чтобы убедиться, что он выполняется после нажатия кнопка.

источник

2016-07-01 20:06:52

Я исправил буквуGuess-ошибку и удалил onclick = "" с

У вас нет функции под названием letterGuess, но вы вызываете ее по щелчку. Изменение, что вызов guess получит Вас где-то

источник

2016-07-01 20:06:39 kwphl

редактировали, что это было ошибкой. Однако проблема не исправить. @kwphl – LearningJS888

Возможно, я не понимаю проблемы, с которой вы столкнулись ... Я вставил ваш код в ручку: http://codepen.io/anon/pen/vKmVVw и когда я добавляю правильное письмо в текстовое поле и нажимаю ' Полагаю, что он помещает письмо на линии, как ожидалось. – kwphl

Да, это сработало для меня тоже нет - у меня получилось отсутствие полуколонки. Однако пробелы между буквами перепутаны при вводе правильной буквы; не позволяя пользователю увидеть сообщение «Вы WIN». Какие-нибудь подсказки о том, как это исправить? @kwphl – LearningJS888

Исправить Totalguesses как глобальную переменную. Он локален для функции startGame().

Он отлично работает, буква письма должна быть в нижнем регистре.

Рабочая JSFiddle here

источник

2016-07-01 20:23:37

Я переместил ее на глобальную. Но скрипт JS не работает - похоже, вы опубликовали мою версию (сломанную), поскольку я все еще вижу totalGuesses как локальную переменную @ Ransher.singh – LearningJS888

Trigger function on click for hangman game

ответ

Смежные вопросы