function click() { let principal = document.getElementById("principal").value; let rate = document.getElementById("rate").value; let years = document.getElementById("years").value; let interest = principal * years * rate / 100; let year = new Date().getFullYear() + parseInt(years); document.getElementById("result").innerHTML = "If you deposit " + principal + ",\<br\>at an interest rate of " + rate + "%\<br\>You will receive an amount of " + interest + ",\<br\>in the year " + year + "\<br\>" }En lugar de la tasa, capital, tasa, interés, año, necesito sus valores con un color de fondo amarillo, sin embargo, rate.style.background = "amarillo" no es posible. ¿Cómo podría cambiar el color de fondo de las variables en el resultado?
Debe cambiar el estilo DOM, y no su valor como lo hizo allí, puede consultar los DOM (para que pueda manipular los estilos) y solicitar valor cada vez, así:
function click() { let principal = document.getElementById("principal"); let rate = document.getElementById("rate"); let years = document.getElementById("years"); let interest = principal.value * years.value * rate.value / 100; let year = new Date().getFullYear() + parseInt(years); document.getElementById("result").innerHTML = "If you deposit " + principal.value + ",\<br\>at an interest rate of " + rate.value + "%\<br\>You will receive an amount of " + interest.value + ",\<br\>in the year " + year.value + "\<br\>" }Como se menciona en el comentario, hay algunas cosas que deben corregirse:
document.getElementById().value devuelve el atributo de value de un elemento DOM y el atributo no tiene ninguna propiedad de fondo que se pueda modificar. Para hacer lo que quiere lograr, debe envolver ese valor en un elemento DOM (por ejemplo, un <span> ) y darle el fondo a ese elementodocument.getElementById().value devuelve el valor como una cadena; si quieres hacer matemáticas con él, tienes que convertir el valor a un númeroCuando arregles eso, deberías terminar con algo similar a:
function clickFn() { let principal = parseFloat(document.getElementById("principal").value); let rate = parseFloat(document.getElementById("rate").value); let years = parseInt(document.getElementById("years").value); let interest = principal * years * rate / 100; let year = new Date().getFullYear() + years; document.getElementById("result").innerHTML = "If you deposit <span class='yellow'>" + principal + "</span>,<br\>at an interest rate of <span class='yellow'>" + rate + "%</span><br\>You will receive an amount of <span class='yellow'>" + interest + "</span>,<br\>in the year <span class='yellow'>" + year + "</span><br\>"; /* You could use a templating string instead of string concatenation, to make your code a little bit more compact: document.getElementById("result").innerHTML = `If you deposit <span class='yellow'>${principal}</span>,<br\>at an interest rate of <span class='yellow'>${rate}%</span><br\>You will receive an amount of <span class='yellow'>${interest}</span>,<br\>in the year <span class='yellow'>${year}</span><br\>` */ } document.getElementById("calculate").addEventListener('click', clickFn); .yellow { background-color: yellow; } <input id="principal" name="principal" type="number" /> <input id="rate" name="rate" type="number" /> <input id="years" name="years" type="number" /> <button id="calculate">calculate</button> <p id="result"> </p>