时间戳

首页 > 解决方案 > 对象属性中使用的全局变量未在对象内部更新 - javascript

javascript - 对象属性中使用的全局变量未在对象内部更新 - javascript

问题描述

我有一个像这样设置的对象：

let xVal = 0;

const myObj = {
  infoText: "The value of x is: " + xVal
}

稍后会引用此 infoText 以在将鼠标悬停在元素上时显示一些工具提示。

function showTooltip(obj) {
  targetEl = document.getElementById('targetId');
  targetEl.innerHTML = obj.infoText;
}

xVal 的值可以改变。我遇到的问题是，无论该值是否已更改，当我将鼠标悬停在我的元素上时，它将始终显示 xVal 的初始值。我认为这是因为 myObj.infoText 在启动时建立并提取 xVal 的初始值。如何让 myObj.infoText 显示当前的 xVal 并跟上变化？

编辑 - 这是我的代码的一个更好的例子，我意识到我最初提供了一个糟糕的示例。

let count = 0;
let clickVal = 1;

const myObj = {
  cost: 10,
  infoText: `This displays the current value of your click <br />
  Current click = ` + clickVal
};

function cardContent(obj) {
  targetEl = document.getElementById('targetId');
  targetEl.innerHTML = obj.infoText;
}
cardContent(myObj); // initialize card content

function handleClick() {
  count += clickVal;
}

function upgradeClick() {
  count -= myObj.cost;
  clickVal += 1;
  cardContent(myObj) // attempting to update the text to reflect new value
}

有一个调用按钮handleClick和一个调用upgradeClick. 使用 CSS，将div鼠标悬停在upgradeClick按钮上时会隐藏并显示以下内容。 <div id='targetId'></div>这是infoText表演的地方。

标签： javascript

解决方案

你可以使用像getter这样的东西

let xVal = 0;

const myObj = {
  get infoText() {return "The value of x is: " + xVal;}
}

function showTooltip(obj) {
  console.log(obj.infoText);
}

showTooltip(myObj);
xVal = 29;
showTooltip(myObj);
xVal = 794;
showTooltip(myObj);

推荐阅读