JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<!-- <main>

  <input type="text">

  <pre id="output"></pre>

</main> -->

<form action="">
  <input type="number" class="text1">
  <input type="number" class="text2">
  <button type="submit">submit</button>
</form>

<p id="result">결과는?</p>

JavaScript

const form = 
  document.querySelector('form');
const text1 = 
  document.querySelector('.text1');
const text2 = 
  document.querySelector('.text2');
const result = 
  document.querySelector('#result');  
form.addEventListener("submit", function(e){
  e.preventDefault();
  const valueText1 = text1.valueAsNumber;
  const valueText2 = text2.valueAsNumber;
  const total = valueText1 + valueText2;
  console.log(valueText1 + valueText2);
  result.innerHTML = `결과는: ${total}`;
  return false;
})

/* 
const inputEl = 
  document.querySelector('[type=text]')

const outputEl = 
  document.getElementById('output')

inputEl.onchange = () => {
  
  const value = inputEl.valueAsNumber
  const type = typeof value
  console.log(typeof inputEl)
  console.log(typeof value)

  outputEl.innerText = JSON.stringify(
    {value, type}, null, 2
  )
} */