Javascript 变量不'；在拥有事件侦听器后，无法更新

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

这是我的密码：

 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;

---

您必须将

ShirtDescrp.innerHTML=userPickColor也在事件侦听器中，因为您更改了变量，但没有告诉dom更新内容
您应该更新与变量相同的dom：


var-white=document.getElementById（“白色”）；
var black=document.getElementById（“黑色”）；
var ShirtDescrp=document.getElementById（“des”）；
var userPickColor=null；
white.addEventListener（“单击”，whiteshirt）；
黑色。addEventListener（“单击”，黑色衬衫）；
函数whiteshirt（）{
userPickColor=“白色”；
ShirtDescrp.innerHTML=userPickColor；
}
函数blackshirt（）{
userPickColor=“黑色”；
ShirtDescrp.innerHTML=userPickColor；
}
白色
黑色
正如其他人所说，您需要将更新
.innerHTML
的行放在回调函数中，以便在更新变量后，也可以使用最新的变量值更新页面

但是，更进一步。。。有一种叫做DRY（不要重复）的通用编码方法，您有两个回调函数，它们在很大程度上做相同的事情。唯一的区别是设置的实际文本。当您的页面上的两个元素中的一个被单击时，这两个函数将运行，并且这两个元素具有要用作其
id
s的文本。我们可以很容易地将两个回调组合为一个，如下所示：


var ShirtDescrp=document.getElementById（“des”）；
//如果变量能帮助您阅读代码，那么变量就没有问题
//更容易，但如果您不使用它们存储的值超过
//有一次，他们真的没有增加多少。
document.getElementById（“白色”）.addEventListener（“单击”，更改颜色）；
document.getElementById（“黑色”）.addEventListener（“单击”，更改颜色）；
函数changeColor（）{
//不需要变量。只需将文本设置为单击的元素的id
//这里的“this”指启动当前函数调用的对象
//这将是两个按钮之一。
ShirtDescrp.innerHTML=this.id；
}
白色
黑色
您已经得到了答案。。。更改不会影响，因为更新未在事件侦听器内发生。这只是我的建议（特别是如果我有更多的颜色选项）：

这是玩的好地方

我也可能会动态生成这些按钮。而且也不会使用
id
来存储颜色，但我会使用类似
data color='red'
的其他方法。变量的值在每次单击时都会更改，但HTML中的文本不会更改。您还必须在事件处理函数中放入最后一行。我尝试了这一行，但仍然不起作用。还有其他方法吗？@Teemu callmewhateyouwant我做了什么，它工作正常。感谢Hanks Scott，我正在考虑DRY的编码方法，这就是为什么我没有首先尝试将userPickColor放在函数中的原因。再次感谢
  <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>

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