below is the Html code find and provide me with the solution.
<!DOCTYPE html>
<html>
<head>
<title> Simple Interest Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="form1">
<div >
<h1> Simple Interest Calculator</h1>
</div>
<div>
<span ><label>Amount</label></span>
<pre ><input type="text" id="amt"></pre>
</div>
<table>
<tr>
<td>
<div>
<span ><label>Interest Rate</label></span>
<pre ><input type="range" id="rng" min="0" max="20"></pre>
</div>
</td>
<td>
<div>
<h3 id="rangedisplay"></h3>
</div>
</td>
</tr>
</table>
<div>
<span ><label>No. of Years </label></span>
<pre ><input type="number" id="year"></pre>
</div>
<div>
<input type="button" value="Compute Interest" id="button">
</div>
<span id="output"><h2></h2></span>
</div>
<div>
<summary>
© Everyone Can Get Rich<br>
This Calculator belongs to <span >Giri</span>
</summary>
</div>
</form>
<script src="web.js"></script>
</body>
</html>
below is the javascript code. Here the problem is with innerText, I could not understand what happened.
please provide me with the solution as soon as possible.
I am new to this domain, please help to fix this issue.
let rangeEl=document.querySelector('#rng');
let dis=document.querySelector('#rangedispaly');
rangeEl.addEventListener('input',function() {
let x=rangeEl.value;
dis.innerText=x;
});
CodePudding user response：
let rangeEl=document.querySelector('#rng');
let dis=document.querySelector('#rangedisplay');
rangeEl.addEventListener('input',function() {
let x = rangeEl.value;
dis.innerHTML = x
});<!DOCTYPE html>
<html>
<head>
<title> Simple Interest Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="form1">
<div >
<h1> Simple Interest Calculator</h1>
</div>
<div>
<span ><label>Amount</label></span>
<pre ><input type="text" id="amt"></pre>
</div>
<table>
<tr>
<td>
<div>
<span ><label>Interest Rate</label></span>
<pre ><input type="range" id="rng" min="0" max="20" step="1"></pre>
</div>
</td>
<td>
<div>
<h3 id="rangedisplay"></h3>
</div>
</td>
</tr>
</table>
<div>
<span ><label>No. of Years </label></span>
<pre ><input type="number" id="year"></pre>
</div>
<div>
<input type="button" value="Compute Interest" id="button">
</div>
<span id="output"><h2></h2></span>
</div>
<div>
<summary>
© Everyone Can Get Rich<br>
This Calculator belongs to <span >Giri</span>
</summary>
</div>
</form>
<script src="web.js"></script>
</body>
</html>CodePudding user response：
let rangeEl=document.getElementById('rng');
let dis=document.getElementById('rangedisplay');
rangeEl.addEventListener('input',function() {
let x = rangeEl.value;
dis.innerHTML = x
});<!DOCTYPE html>
<html>
<head>
<title> Simple Interest Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="form1">
<div >
<h1> Simple Interest Calculator</h1>
</div>
<div>
<span ><label>Amount</label></span>
<pre ><input type="text" id="amt"></pre>
</div>
<table>
<tr>
<td>
<div>
<span ><label>Interest Rate</label></span>
<pre ><input type="range" id="rng" min="0" max="20" step="1"></pre>
</div>
</td>
<td>
<div>
<h3 id="rangedisplay"></h3>
</div>
</td>
</tr>
</table>
<div>
<span ><label>No. of Years </label></span>
<pre ><input type="number" id="year"></pre>
</div>
<div>
<input type="button" value="Compute Interest" id="button">
</div>
<span id="output"><h2></h2></span>
<div>
<summary>
© Everyone Can Get Rich<br>
This Calculator belongs to <span >Giri</span>
</summary>
</div>
</form>
<script src="web.js"></script>
</body>
</html>