More Math Methods

.pow with floats

by trentHarlem

HTML

<h2>
  More Math Methods
</h2>
<h3>
  <i>.pow</i>
</h3>
<input id='dig1' type='text' placeholder='ENTER A DIGIT 0-9'/>
to the <br>
<input id='dig2' type='text' placeholder='ENTER A DIGIT 0-9' />
Power of
<button id='go' onclick="mathPow()">Try it</button>
<button onclick="location.reload()">RESET</button>
<p id="output"></p>
<p id="output2"></p>

CSS

:focus {
  border: 2px solid blue;
}

JavaScript

dig1 = document.getElementById('dig1')
dig2 = document.getElementById('dig2')
let x
let y
//   regex for digits    /^\d*$/g
// regex for floats    /^\d+\.?\d*$/g
//const isNum = /^\d+\.?\d?$/g
// regexr.com/5l7n8
const isNum = /^\d+\.?\d*$/g

dig1.addEventListener('input', getX)
dig2.addEventListener('input', getY)

function getX() {
  x = document.getElementById("dig1").value;
  document.getElementById("output").innerHTML = "You wrote: " + x;
  if (!x.match(isNum)) {
    alert("Must be a valid number");
    console.log('poop')
    this.value = ''
    return false
  } else {
    console.log('got x', x)
  }
}

function getY() {
  y = document.getElementById("dig2").value;
  document.getElementById("output").innerHTML += "You wrote: " + y;
  if (!y.match(isNum)) {
    alert("Must be a valid number");
    console.log('poop')
    this.value = ''
    return false
  } else {
    console.log('got y', y)
  }
}

function mathPow() {
  let sum = Math.pow(x, y)
  if (sum.isNaN === true) {
    //console.log('poop')
    console.log('sum', sum)

    document.getElementById("output2").innerHTML = "Please Enter ONLY digits 0-9"
  } else {
    document.getElementById("output").innerHTML = Math.pow(x, y);
    console.log('sum', sum)
  }
}