Beispiel:JS-math.cbrt.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <style>
math {
	font-size: 2em;
}
.visually-hidden {
  display: none;
}
  </style>
  <title>Math.cbrt </title>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    document.forms.Test.addEventListener('submit', function(submitEvent) {
        calculate();
    	submitEvent.preventDefault();
    });
})

function calculate() {
	const rad = document.forms.Test.Eingabe.value;
	document.querySelector('output').classList.remove('visually-hidden');	 
	document.querySelector('#rad').textContent = rad;
	let result = Math.sqrt(rad);
	document.querySelector('#result').textContent = result;
}
  </script>
</head>
<body>
<h1>Math.cbrt (Kubikwurzel) </h1>
  <p>Bitte geben Sie eine Zahl ein und drücken Sie auf den Button.</p>
  <form name="Test">
    <label for="Eingabe">Radikand</label>
    <input type="number" name="Eingabe" id="Eingabe">
    <button>&#x221b;</button>
  </form>
  
<output class="visually-hidden">
<p><b>Ergebnis</b>:
<p> 
<math>
	<mroot>
		<mn id="rad"></mn>
    <mn>3</mn>
	</mroot>
  <mi>=</mi>
  <mn id="result"></mn>
</math>
</output>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-math.cbrt.html&oldid=89108“