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事件下检查它，如下所示：

＆＃13;

$(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);
  });
});

＆＃13;

<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>

＆＃13;

但请注意，您可以使用DRY（不要重复自己）原则进一步改进此代码。为此，将一个类应用于所有元素并使用单个事件处理程序：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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";
  console.log(userChoice);//THIS WAY
});
$("#paper").click(function(){
    userChoice = "paper";
});
$("#scissors").click(function(){
    userChoice = "scissors";
});
});

Answer 4

将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 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

在页面加载后永远不会执行document.write。而是更新一些标签的.html（）
在点击任何内容之前执行你的写作。

你可能意味着

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”print / elaboration

即可

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

进入eventHandler，就像你的一个：

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

阅读本指南，了解有关javascript执行/运行时间的更多信息：http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/。如果你喜欢它并且通常可能在将来编码，你会发布关于Javascript的其他有趣的问题！

在javascript中打印变量外部函数

7 个答案: