CODEWITHSUNDEEP
javascripthtmlcss
Mohd Gaming
Mohd Gaming

Reputation: 56

I am trying to highlight the output with mark tag but it's not working

I am trying to show my output highlighted with yellow color, but it's not highlighted... Here's my part of code where I got values and calculated the result as si and printed after "You will recieve an amount of" as highlighted with yellow.

var p = document.getElementById("principal").value;
var r = document.getElementById("rate").value;
var n = document.getElementById("years").value;
var si = parseInt((p * n * r) / 100);
document.getElementById('num').innerHTML = si + ",";
document.getElementById('num00').innerHTML = "You will recieve an amount of ";
mark {
  background-color: yellow;
  color: black;
}
<div id="num00"></div><br>
<div id="num"><mark></mark></div>

Upvotes: 0

Views: 933

Answers (1)

David Thomas
David Thomas

Reputation: 253308

The problem you describe is due to this line:

document.getElementById ('num').innerHTML = si+",";

This replaces the existing innerHTML of the selected element with the created HTML; so the <mark> element no longer exists.

Instead, I'd suggest:

document.querySelector('#num mark').textContent = si+",";

Which uses CSS selector syntax to find the <mark> element within an element whose id is "num".

const calculate = () => {
  let p = parseInt(document.getElementById("principal").value),
      r = parseInt(document.getElementById("rate").value),
      n = parseInt(document.getElementById("years").value),
      si = parseInt((p * n * r) / 100);

  document.querySelector('#num mark').textContent = si + ",";
  document.getElementById('num00').innerHTML = "You will recieve an amount of ";
  },
  button = document.querySelector('button');
  
  button.addEventListener('click', calculate);
mark {
  background-color: yellow;
  color: black;
}
label {
display: flex;
width: 60%;
justify-content: space-between;
margin: 0.5em auto;
}
<form action="#">
<fieldset>
  <legend>Set values</legend>
  <label>Principal
  <input type="number" min="40" max="300" step="1" id="principal" />
  </label>
  <label>Rate
  <input type="number" min="0.3" max="2" step="1" id="rate" />
  </label>
  <label>Years
  <input type="number" min="2" max="40" step="1" id="years" />
  </label>
</fieldset>
<fieldset>
  <button type="button" id="test">Get quote</button>
</fieldset>
</form>

<div id="num00"></div><br>
<div id="num"><mark></mark></div>

Upvotes: 2

Related Questions