JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<ol>
    <li>要素をつかむ</li>
    <li>btnをおした時のイベントをハンドリングする（addEventListener）<br>addEventListener('イベント名', 関数, キャプチャ)</li>
    <li></li>
</ol>
<input type="text" id="ipt1" />+<input type="text" id="ipt2" />
=<span id="result"></span>
<p><input type="button" id="btn" value="計算する！" /></p>

JavaScript

//var p1 = 5;
//var p2 = 7;
var ipt1 = document.getElementById('ipt1');
var ipt2 = document.getElementById('ipt2');
var btn = document.getElementById('btn');

btn.addEventListener("click", function() {
    var val1 = Number(ipt1.value),
        val2 = Number(ipt2.value);
  
    var result = myFunction(val1, val2);
  document.getElementById('result').innerHTML = result;
}, false);

function myFunction(a, b) {
    var result = a + b;
    return result;
}