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

马尔马佐

由于某种原因,我无法更新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;
斯科特·马库斯(Scott Marcus)

正如其他人所说,您需要放置用于更新.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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

检查元素是否具有事件侦听器。没有jQuery

执行所有事件侦听器回调后执行代码

所有事件都具有侦听器数组,还是所有“发射器”都具有侦听器数组?

如何在不随机执行函数的情况下将变量传递给具有事件侦听器的函数

具有事件的侦听器,该事件涉及何时将帧捕捉到屏幕的左侧或右侧

作用域变量在事件侦听器更改后未在DOM中更新

JavaScript-不会触发具有window.matchMedia的事件侦听器

Android Firestore 快照侦听器指标在没有事件侦听器的情况下注册

jQuery DataTables的on()事件侦听器,具有多个事件

如何使用带有事件学说的事件侦听器更改相关实体

将带有事件侦听器的元素传递给模板事件内的appendChild

事件侦听器在没有事件的情况下执行并遍历HTML集合

jQuery事件名称空间中所有事件的一个侦听器?

具有相同功能的多个事件侦听器存储单独的局部变量?

删除DOM对象上的所有事件侦听器

如何在NodeJS EventEmitter中删除所有事件侦听器?

XML onClick 如何在没有事件侦听器的情况下工作?

如何在javascript中为所有事件添加事件侦听器而不单独列出它们?

从按钮输入事件侦听器更新

从Vaadin事件侦听器更新组件

没有事件侦听器面板,如何在HTML中找到“ onevent”处理程序的源?

使用javascript手动更改表单/文本区域输入,并确保触发所有事件侦听器

在 javascript 中使用带有事件侦听器的 for 循环时,我无法理解逻辑

如何为多个函数调用删除一个函数中的所有事件侦听器?

使用.on()事件的变量,自定义jQuery插件中的侦听器不会触发

为什么DOM元素仅在事件侦听器完成后才更新?(纯js)

在更新 Audio 元素中的 `src` 后,事件侦听器会发生什么?(反应)

在事件触发后添加事件侦听器“加载”

调用事件后等待事件侦听器完成