I am trying to create a paragraph with contenteditable enabled, where you will enter the value. Later on, by pressing on the button "Submit" I want that it triggers function if, else which will take the number that the user wrote in the content editable. After checking the if-else function I want that result to be displayed in another paragraph. If the number is > 4, it should say passed, and if <, then failed. I cannot figure out, how by pressing the button trigger the function which will read my paragraph number and trigger the if function then. It should look like this
My code
<h2>Enter data</h2>
<p><span contenteditable="true" id="iev"> </span></p>
<button onclick="nep()">Check!</button>
<br><br><br>
<h2>Result</h2><br>
<span contenteditable="true" id="izv"> </span>
and for script:
var rezultats = "";
var izv = document.getElementById("izv");
vertejums = document.getElementById("iev");
rezultats = parseFloat(vertejums);
function nep() {
if (rezultats >=4.0)
izvads = "Passed!"
else
izvads = "Failed!";
izv = document.getElementById("izv");
izv.innerHTML = izvads;
}
Thanks!
Holaaa. you must pass the function in the case of clicking this button for it to be executed
<button onclick={nep()}>Check!</button>
add textContent, and reformat code, example functional:
var rezultats = "";
document.getElementById("poga1").onclick = function () {
let izv = document.getElementById("izv");
let vertejums = document.getElementById("iev");
let rezultats = parseFloat(vertejums.textContent);
return nep(rezultats);
};
function nep(rezultats) {
console.log({ rezultats });
if (rezultats >= 4.0) {
izvads = "Passed!";
} else {
izvads = "Failed!";
}
izv = document.getElementById("izv");
izv.innerHTML = izvads;
}
const head = document.getElementsByTagName("head");
head[0].style.textAlign = "left";
const main = document.getElementsByTagName("main");
main[0].style.width = "33rem";
main[0].style.margin = "auto";
main[0].style.textAlign = "center";
main[0].style.border = "solid 3px green";
const h2 = document.getElementsByTagName("h2");
h2[0].style.margin = "0";
h2[0].style.padding = "1rem 0.25rem";
h2[0].style.backgroundColor = "#f5a9d7";
const p = document.getElementsByTagName("p");
p[0].style.padding = "0.5rem";
p[0].style.margin = "2.5rem";
p[0].style.backgroundColor = "#f2e2ec";<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>Ievadi datus</h2>
<p>Ievade<span contenteditable="true" id="iev">5</span></p>
<button id="poga1">Check!</button>
<br /><br /><br />
<h2>Rezultāts</h2>
<br />
<span contenteditable="true" id="izv">Vispirms ievadi datus!</span>
<br />
<br />
<br />
</body>
</html>