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

Question

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

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的地方显示。

Answer 1

你可以使用类似 setter/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);