java script if文分岐

Question

<input type="text" id="suuji1"placeholder="数字１"maxlength="1">
<input type="text" id="suuji2"placeholder="数字２"maxlength="1">

<span class="result">答えの出る場所</span>
                <br>
                <button class="button" type="button" onclick="onClick();">せいかい</button>

<input type="button" id="h1" value="数字１" onclick="append('1')">
<input type="button" id="h2" value="数字２" onclick="append('2')">
<input type="button" id="h3" value="数字３" onclick="append('3')">
<input type="button" id="h4" value="数字４" onclick="append('4')">
<input type="button" id="h5" value="数字５" onclick="append('5')">

<script>

var hen1 =document.getElementById("h1");
var hen2 =document.getElementById("h2");
var hen3 =document.getElementById("h3");
var hen4 =document.getElementById("h4");
var hen5 =document.getElementById("h5");

    if(suuji1 === null){
        $(suuji1).append('hen1');
        $(suuji1).append('hen2');
        $(suuji1).append('hen3');
        $(suuji1).append('hen4');
        $(suuji1).append('hen5');
        }else{
        $(suuji1).append('hen1');
        $(suuji1).append('hen2');
        $(suuji1).append('hen3');
        $(suuji1).append('hen4');
        $(suuji1).append('hen5');
        }

        function onClick(){
    //1つ目の入力ボックスの値を取得する
    var value1 = document.getElementById("suuji1").value;
    //2つ目の入力ボックスの値を取得する
    var value2 = document.getElementById("suuji2").value;
    //足算する
    var result = parseInt(value1)  + parseInt(value2) ;
    //値を設定する
    document.querySelector('.result').innerHTML = result ;

    

}



</script>
</html>
コード

やりたい事　一桁のたしざん

具体的には、数字１にボタンで入力された一桁の数を代入、代入した数字を数字１に表示する、数字２にも同様に代入、表示してたしざんを開始するプログラムを作成したいです。
IF文では数字１に何も無ければ数字１に代入し、数字１に入って入れば数字２に代入するIF文を作成したかったのですが、調べてみたのですが理解できず息詰まっています。また数字をキーボードで入力するものは完成しているのですが、ボタンではうまく動作しなかったため初めから作成しています。

Comments

[BeatStar]

> 調べてみたのですが理解できず息詰まっています

何が理解できないのでしょうか。つか、このコードはどこから持ってきたのでしょうか。(質問者さんが自力で書いたのでしょうか。それともほぼコピペってこと? 理解して書いたのか、そもそも理解せずに書いたのかとかで説明も変わってきますし)

Answer 1

よくわからないですがこんな感じで

<script>
document.addEventListener('click', (e)=>{
  let v;
  const t=e.target;
  const s1=document.querySelector('#suuji1');
  const s2=document.querySelector('#suuji2');
  const res=document.querySelector('.result');
  if(v=t.dataset["value"]){
    if(!s1.value){
      s1.value=v;
    }else if(!s2.value){
      s2.value=v;
    }
  }
  if(t.closest('#seikai') && s2.value){
    res.textContent=parseInt(s1.value)+parseInt(s2.value);
  }
});
</script>
<form>
<input type="text" id="suuji1" placeholder="数字１" maxlength="1">+
<input type="text" id="suuji2" placeholder="数字２" maxlength="1">
<span class="result">答えの出る場所</span><br>
<button type="button" id="seikai">せいかい</button>

<input type="button" data-value="1" value="数字１">
<input type="button" data-value="2" value="数字２">
<input type="button" data-value="3" value="数字３">
<input type="button" data-value="4" value="数字４">
<input type="button" data-value="5" value="数字５">
</form>

Comments

[m.aru8]

思っていた通りの結果になりました、有難う御座います。
厚かましいお願いですが今後のために良ければIFの処理を簡単に教えて頂けませんか？
お願い致します。

Answer 2

以下のような動きをするプログラムだと仮定すると、

1. 数字３ボタンをクリックする
   => 数字１フィールドに３が入力される
2. 数字４ボタンをクリックする
   => 数字２フィールドに４が入力される
3. せいかいボタンをクリックする
   => 答えの出る場所に７が表示される

数字ボタンのonclickに指定されているappend関数が定義されていないようです。

<input type="text" id="suuji1" placeholder="数字１" maxlength="1">
<input type="text" id="suuji2" placeholder="数字２" maxlength="1">

<div class="result">答えの出る場所</div>

<button class="button" type="button" onclick="onClick();">せいかい</button>

<input type="button" id="h1" value="数字１" onclick="append('1')">
<input type="button" id="h2" value="数字２" onclick="append('2')">
<input type="button" id="h3" value="数字３" onclick="append('3')">
<input type="button" id="h4" value="数字４" onclick="append('4')">
<input type="button" id="h5" value="数字５" onclick="append('5')">

<script>
var suuji1 = document.getElementById("suuji1");
var suuji2 = document.getElementById("suuji2");
var hen1 = document.getElementById("h1");
var hen2 = document.getElementById("h2");
var hen3 = document.getElementById("h3");
var hen4 = document.getElementById("h4");
var hen5 = document.getElementById("h5");

function append(suuji) {
  // suuji1に値が設定されていなかったら
  // suuji1の値にsuujiを設定する

  // suuji1に値が設定されていたら
  // suuji2の値にsuujiを設定する
}

function onClick() {
  //1つ目の入力ボックスの値を取得する
  var value1 = suuji1.value;
  //2つ目の入力ボックスの値を取得する
  var value2 = suuji2.value;
  //足算する
  var result = parseInt(value1)  + parseInt(value2);
  //値を設定する
  document.querySelector('.result').innerHTML = result;
}
</script>