JSFiddle - React, Tailwind, and code Playground

by ElMeroMero

HTML

<strong>Write here "21." --></strong>
<input onkeyup="render(event)" type="number" class="test" />


<h1>
  Event.target.value = <span id="foo"></span>
</h1>

<h1>
  parseFloat(event.target.value) = <span id="foo2"></span>
</h1>


<h1>
  parseFloat("21.") = <span id="foo3"></span>
</h1>

CSS

body {
  font-family: sans-serif
}

.test {
  padding: 10px;
  border: 2px solid red;
  font-size: 20px;
}

span {
  padding: 10px;
  background-color: #e3e3e3;
  border-radius: 20px;
  margin-left: 10px;
}

JavaScript

function render(event) {

  window.document.getElementById("foo").innerHTML = event.target.value;

  if (Number.isNaN(parseFloat(event.target.value))) {
  
    window.document.getElementById("foo2").innerHTML = "NaN"
    
  } else {
  
    window.document.getElementById("foo2").innerHTML = parseFloat(event.target.value)
    
  }


}

window.document.getElementById("foo3").innerHTML = parseFloat("21.")