Tengo un objeto configurado así:

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

Se hace referencia a este texto de información más adelante para mostrar una especie de información sobre herramientas al pasar el cursor sobre un elemento.

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

El valor de xVal puede cambiar. El problema con el que me encuentro es que, independientemente de si ese valor ha cambiado o no, cuando paso el mouse sobre mi elemento, siempre mostrará el valor inicial de xVal. Supongo que esto se debe a que myObj.infoText se establece cuando se inicia y extrae el valor inicial de xVal. ¿Cómo puedo obtener myObj.infoText para mostrar el xVal actual y mantenerme al día con los cambios?

EDITAR: aquí hay un mejor ejemplo de mi código, me doy cuenta de que originalmente ofrecí una muestra deficiente.

 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 }

Hay un botón que invoca handleClick y otro que invoca upgradeClick . Usando CSS, el siguiente div está oculto y se muestra al pasar el mouse sobre el botón upgradeClick . <div id='targetId'></div> Aquí es donde se muestra el infoText .