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

Instead of the rate, principal, rate, interest, year, I need their values with a yellow background color, however, rate.style.background = "yellow" is not possible. How could I change the variables background color in the result?

CodePudding user response：

You need to change the DOM style, and not it's value like you did there, you can query the DOMs (so you can manipulate the styles) and ask for value every time, like this:

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

CodePudding user response：

As mentioned in the comment, there are a few things that should be fixed:

1. document.getElementById().value returns the value attribute of a DOM element and the attribute has no background property that can be modified. In order to do what you want to achieve, you have to wrap that value in a DOM element (e.g. a <span>) and give the background to that element
2. document.getElementById().value returns the value as a string; if you want to do math with it, you have to convert the value to a number

When you fix that, you should end up with something similar to:

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>