如何更改javascript中以.value结尾的变量的背景色

Question

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>"
}

我需要的不是利率、本金、利率、利息、年份，而是黄色背景色的值，然而，rate.style.background="黄色"；不可能。如何更改结果中的变量背景颜色？

Answer 1

您需要更改DOM样式，而不是像在那里那样更改它的值，您可以查询DOM(这样您就可以操作样式(并每次请求值，如下所示：

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>"
}

Answer 2

正如评论中提到的，有一些事情需要修复：

1. document.getElementById().value返回DOM元素的value属性，并且该属性没有可修改的后台属性。为了实现您想要实现的目标，您必须将该值封装在DOM元素(例如<span>(中，并为该元素提供背景
2. document.getElementById().value以字符串形式返回该值；如果你想用它做数学运算，你必须把值转换成一个数字

当你修复它时，你应该会得到类似的东西：

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>