версия JSFiddle не работала, поэтому я добавил codepen вместо Working CodepenКак обновить переменную с помощью кнопки с JQuery или JavaScript
Я довольно новыми для JavaScript и JQuery, так что я прошу прощения если моя формулировка не совсем правильная, или если ответ предельно очевиден, я здесь, чтобы учиться :) Итак, я создал игру с ножницами из каменной бумаги, все отлично работает, кроме кнопки «Новая игра». Я не могу понять, как обновить переменную «computerChoice». Я смог установить его так, чтобы страница обновилась, но этого я не хочу достичь. Я хочу, чтобы при нажатии кнопки «Новая игра» переменная «computerChoice» выберет новую опцию в зависимости от случайного числа, например, при обновлении страницы. Я попытался установить его на null, когда вы нажимаете «Новая игра», но затем это просто возвращает числа, когда вы идете играть в игру.
HTML:
<h1>Rock Paper Scissors</h1>
<h2>Pick your weapon!</h2>
<p><button id="refresh">New Game</button></p>
<button onClick='choose("rock")' class="choices">Rock</button>
<button onClick='choose("paper")' class="choices">Paper</button>
<button onClick='choose("scissors")' class="choices">Scissors</button>
<p><button onClick='compare(user, computerChoice)' class="compares">1...2...3...</button></p>
<p><b id="you">...</b> Vs.
<b id="computer">...</b></p>
<p><b id="results"></b></p>
JavaScript:
//user choices
var user;
var choose = function(choice) {
user = choice;
//document.getElementById("you").innerHTML = user;
}
//computer choices
var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
}
else if (computerChoice < 0.67) {
computerChoice = "paper";
}
else {
computerChoice = "scissors";
}
//compare user choice to computer choice
function compare(choice1, choice2) {
if (choice1 === choice2) {
document.getElementById('results').innerHTML = "How boring, you tied.";
}
else if (choice1 === "rock") {
if (choice2 === "scissors") {
document.getElementById('results').innerHTML = "They'll feel that in the morning.";
} else {
document.getElementById('results').innerHTML = "Can you breathe? I think not.";
}
}
else if (choice1 === "scissors") {
if (choice2 === "paper") {
document.getElementById('results').innerHTML = "Snippitysnip, you sliced them in two.";
} else {
document.getElementById('results').innerHTML = "Ouch, looking a little blunt.";
}
}
else if (choice1 === "paper") {
if (choice2 === "rock") {
document.getElementById('results').innerHTML = "You smothered them, eesh!"
} else {
document.getElementById('results').innerHTML = "You're looking a bit like a banana split."
}
}
else {
document.getElementById('results').innerHTML = "Something's not quite right...what did you do?!"
}
}
// refresh, clear and display computer choices and results. Disable, enable buttons.
function disableButtons() {
$('button.choices').attr('disabled', true);
}
function enableButtons() {
$('button.choices').attr('disabled', false);
}
$('.choices').click(function() {
$('#you').html(user); // this works on codepen but not on jsfiddle? D:
$('#computer').html('...');
disableButtons();
});
$('#refresh').click(function() {
$('#results').html('');
$('#you, #computer').html('...');
enableButtons();
refreshComputer();
});
$('.compares').click(function() {
$('#computer').html(computerChoice);
});
версия JSFiddle не работала, поэтому я добавил codepen вместо Working Codepen
Где находится 'refreshComputer'? –
Проверьте консоль. Ошибки происходят повсюду, и большинство или все они связаны с областью переменных или функций. –
Для более сложных вопросов, подобных этому, было бы лучше всего бросить его в [JSFiddle] (https://jsfiddle.net/) или [CodePen] (https://codepen.io/), заставить его работать там, тогда становится намного легче найти решение, которое помогает. – samanime