在javascript中打印變量外功能

Question

var userChoice; 
$(document).ready(function(){ 
$("#rock").click(function(){ 
    userChoice = "rock"; 
}); 
$("#paper").click(function(){ 
    userChoice = "paper"; 
}); 
$("#scissors").click(function(){ 
    userChoice = "scissors"; 
}); 
}); 
document.write(userChoice); 

我正在嘗試在單擊事件後獲取用戶輸出。但是當我運行這個代碼時，我得到的輸出爲「未定義」。我對編程非常陌生。

Answer 1

首先更新，不要使用document.write。這被認爲是非常糟糕的做法。而是修改DOM元素的文本以顯示輸出。

其次，問題是因爲您只檢查頁面加載時的值userChoice。你需要，而不是檢查它在每個click事件，像這樣：但是，您可以通過使用幹進一步改善這個代碼

$(document).ready(function() { 
 
    $("#rock").click(function() { 
 
    var userChoice = "rock"; 
 
    $('#output').text(userChoice); 
 
    }); 
 
    
 
    $("#paper").click(function() { 
 
    var userChoice = "paper"; 
 
    $('#output').text(userChoice); 
 
    }); 
 
    
 
    $("#scissors").click(function() { 
 
    var userChoice = "scissors"; 
 
    $('#output').text(userChoice); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="rock">Rock</button> 
 
<button id="paper">Paper</button> 
 
<button id="scissors">Scissors</button> 
 
<div id="output"></div>

注（不要重複自己）原則。要做到這一點應用類的所有元素，並使用一個單一的事件處理程序：

$(document).ready(function() { 
 
    $(".choice").click(function() { 
 
    userChoice = this.id; 
 
    $('#output').text(userChoice); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="rock" class="choice">Rock</button> 
 
<button id="paper" class="choice">Paper</button> 
 
<button id="scissors" class="choice">Scissors</button> 
 
<div id="output"></div>

Answer 2

這是因爲，

document.write(userChoice); 

執行的頁面加載和userChoice獲得新的價值，當一些click操作執行。

那麼試試這個：

$("#scissors").click(function(){ 
    userChoice = "scissors"; 
    console.log(userChoice); 
}); 

注：不要使用document.write()，因爲這會使你的整個頁面空白，只顯示在userChoice

Answer 3

文本將document.write()點擊回調函數中：

var userChoice; 
$(document).ready(function(){ 
$("#rock").click(function(){ 
    userChoice = "rock"; 
    document.write(userChoice); 
}); 
$("#paper").click(function(){ 
    userChoice = "paper"; 
    document.write(userChoice); 
}); 
$("#scissors").click(function(){ 
    userChoice = "scissors"; 
    document.write(userChoice); 
}); 
}); 

document.write()被調用一旦頁面已經加載並且只有這一次。但由於您沒有給userChoice初始化一個值，它的值是undefined。當您點擊其中一個按鈕時，userChoice的值會被更改，但不會再調用document.write()。

Answer 4

你必須把打印內點擊事件。 當頁面加載時，document.write立即觸發並在當時爲空。

var userChoice; 
$(document).ready(function(){ 
$("#rock").click(function(){ 
    userChoice = "rock"; 
    console.log(userChoice);//THIS WAY 
}); 
$("#paper").click(function(){ 
    userChoice = "paper"; 
}); 
$("#scissors").click(function(){ 
    userChoice = "scissors"; 
}); 
}); 

Answer 5

只有一個替換您的功能和使用innerHTML或更改其中的值是得到選擇。

你document.write(userChoice);將點擊事件之前執行，並不會在點擊

var userChoice; 
 
$(document).ready(function() { 
 
    $(".choice").click(function(){ 
 
    userChoice = this.innerHTML; 
 
    console.log(userChoice); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="choice">rock</p> 
 
<p class="choice">paper</p> 
 
<p class="choice">scissors</p>

Answer 6

1. 從未頁面加載後執行文件撰寫。而是更新一些標籤。html（）
2. 你執行你的寫之前，你點擊任何東西。

你可能意味着

var userChoice = ""; 
 
$(document).ready(function() { 
 
    $(".hitme").click(function() { 
 
    userChoice = this.id; 
 
    $("#choice").html(userChoice); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="hitme" type="button" id="rock">Rock</button> 
 
<button class="hitme" type="button" id="paper">Paper</button> 
 
<button class="hitme" type="button" id="scissors">Scissors</button> 
 
<span id="choice"></span>

Answer 7

我想，最好不要給你的代碼執行最後的代碼，但更多的解釋：

不要使用

document.write 

這是危險的，它可以重寫整個html頁面（當頁面已經加載時）。

的輸出設定爲「不確定」，因爲變量

userChoice 

是不是還初始化，一旦用戶觸發一個事件將被初始化：你的情況了div點擊。所以，只要將「userChoice」打印/闡述

(eg: $('.some_div').innerHTML = userChoice) 

到事件處理程序，像你這樣的一個：

$("#scissors").click(function(){ .... }) 

閱讀本指南，瞭解有關JavaScript執行更全面的信息/運行時間：http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/。 如果你會喜歡它，並在將來可能編碼，你會發布其他有關Javascript的有趣問題！