I tried the script and its working well for the first 2 functions, but then when I added the third one, the entire page just doesn’t work. Can I know why and how to fix?
I am a beginner Javascripter and I still need practices so can you guys explain someway suitable for my level?
let a = 0,
b = 1
function inc() {
a += b
document.getElementById("x").innerHTML = "x" + " " + "=" + " " + a;
};
function dec() {
a -= b
document.getElementById("x").innerHTML = "x" + " " + "=" + " " + a;
};
function input() {
if (document.getElementById("input").innerHTML == null) {
} else {
b = Number(document.getElementById("input").innerHTML);
};
};body {
background-color: powderblue;
}<h1>Online simple Javascript project!</h1>
<p id="x">x = 0</p><!-- Result -->
<p><br><br>Change the power here!</p><!-- // Description -->
<input id="input"><button type="button" onclick="input()">Apply</button><!-- // Button that save your power -->
<h2>Click the button to increase x</h2><!-- // Description -->
<button type="button" onclick="inc()">Increase</button><!-- // Increase -->
<h2>Click the button to decrease x</h2><!-- // Description -->
<button type="button" onclick="dec()">Decrease</button><!-- // Decrease -->
>Solution :
Use value instead of innerHTML for input
function input() {
if (document.getElementById("input").value != null){
b = Number(document.getElementById("input").value);
};
};