Question

由于某种原因，我无法更新userPickColor的值，该值始终未定义。但是我尝试在这些函数中使用console.log，但实际上我的值正在更改。但是由于某些原因，一旦我在函数外部调用它，它就根本不会更新。我还是Java语言的新手，请帮助我

这是我的代码：

 var white = document.getElementById("white");
 var black = document.getElementById("black");
 var userPickColor;

 white.addEventListener("click", whiteshirt);
 black.addEventListener("click", blackshirt);

 function whiteshirt(){
   userPickColor= "white";
 }

function blackshirt(){
  userPickColor= "black";
}

ShirtDescrp.innerHTML = userPickColor;

Answer 1

正如其他人所说，您需要在回调函数中放置用于更新.innerHTML的行，以便在更新变量之后，也可以使用最新的变量值来更新页面。

但是，将这一步骤更进一步...有一种称为DRY（不要自己重复）的通用编码方法，并且您有两个回调函数在很大程度上完成相同的工作。唯一的区别是设置的实际文本。当单击页面上的两个元素之一并且这两个元素具有要用作其id的文本时，将运行这两个函数。我们可以很容易地将两个回调合并为一个这样的回调：

var ShirtDescrp = document.getElementById("des");

// There's nothing wrong with variables if they help you read the code
// more easily, but if you won't be using the value they store more than
// once, they don't really add much.
document.getElementById("white").addEventListener("click", changeColor);
document.getElementById("black").addEventListener("click", changeColor);

function changeColor() { 
  // No variable needed. Just set the text to the id of the element that got clicked
  // "this" here refers to the object that initiated the call for the current function
  // which will be one of the two buttons.
  ShirtDescrp.innerHTML = this.id;
}

<button id="white">white</button>
<button id="black">black</button>

<p id="des"></p>

Answer 2

由于您更改了变量，因此还必须在事件监听器中放入ShirtDescrp.innerHTML = userPickColor;，但是您没有告诉dom更新内容

Answer 3

您应将DOM与变量更新相同：

var white = document.getElementById("white");
var black = document.getElementById("black");
var ShirtDescrp = document.getElementById("des");
var userPickColor = null;

white.addEventListener("click", whiteshirt);
black.addEventListener("click", blackshirt);

function whiteshirt() {

  userPickColor = "white";
  ShirtDescrp.innerHTML = userPickColor;
}

function blackshirt() {
  userPickColor = "black";
  ShirtDescrp.innerHTML = userPickColor;
}

<button id="white">white</button>
<button id="black">black</button>

<p id="des"></p>

Answer 4

您已经有了答案...更改不受影响，因为事件监听器中未发生更新。这只是我的建议（特别是如果我有更多颜色选择）：

  <p id="color-name">none</p>

  <div class="color-buttons">
    <button id="white">White</button>
    <button id="black">Black</button>
    <button id="orange">Orange</button>
    <button id="blue">Blue</button>
    <button id="green">Green</button>
    <button id="red">Red</button>
  </div>

像这样的JavaScript

var buttons = document.querySelectorAll(".color-buttons button");
var color_name = document.getElementById("color-name");

buttons.forEach(function(btn){
  btn.addEventListener("click", function(){
    color_name.style.background=this.id;
    color_name.innerHTML=this.id;
  });
});

这里是fiddle可以玩耍的地方。

我也可能会动态地生成这些按钮。而且也不会使用id来存储颜色，但是我会使用诸如data-color='red'之类的其他东西。

具有事件侦听器后，变量不更新

4 个答案: