limemint
@limemint (斉藤 貴博)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

ボタンを押したら数字が入力されるコードの実装

 ### 解決したいこと

html に「00:00」 という表示と、
数字を入力するための 「1」「2」「3」 「4」「5」「6」 「7」 「8」「9」 「0」というボタンを準備した状態で、
「1」を押せば「00:01」、
「1」「2」 」と押せば「00:12」、
「1」「2」「3」 「4」「5」と押すと「12:34」 と表示される(「5」は無視される)ような
html、javascriptはどのようなコードを書けばいいのでしょうか?

html内にidをつけ、Javascriptには getElementByIdでidを取ってきて、addEventListener の 「クリックしたときに」、
という流れでコードを書けばいいの かなと考えているのですが、console.logに出すことはできても数字が上書きされるようにできません。

ひとまずjavascriptでは数字ボタンの1を入力した場合を載せております。
美しくないコードで構いません。
onclick, jQueryは使わずにしたいのですが、 実装可能でしょうか?

ご教授いただければと思います。

該当するソースコード

ソースコードを入力
```<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
        <body>
           <div id="output">00:00</div>
            <script src="js/timer.js"></script>
            <form>
                <input type="button" id="number1" value="1">
                <input type="button" id="number2" value="2">
                <input type="button" id="number3" value="3"><br>
                <input type="button" id="number4" value="4">
                <input type="button" id="number5" value="5">
                <input type="button" id="number6" value="6"><br>
                <input type="button" id="number7" value="7">
                <input type="button" id="number8" value="8">
                <input type="button" id="number9" value="9"><br>
                <input type="button" id="stopresetBtn" value="STOP/RESET">
                <input type="button" id="number0" value="0">
                <input type="button" id="startBtn" value="START">
                
            </form>
        </body>
    </head>
   </html>

const btnOne = document.getElementById('number1');
btnOne.addEventListener('click', () => {
    console.log('1');
});


### 自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
0

5Answer

ひとまず、数字ボタンの処理だけ書いてみました。理解できますでしょうか?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>counter</title>
</head>
<body>
    <div id="output">00:00</div>
    <form>
        <input type="button" id="number1" value="1">
        <input type="button" id="number2" value="2">
        <input type="button" id="number3" value="3"><br>
        <input type="button" id="number4" value="4">
        <input type="button" id="number5" value="5">
        <input type="button" id="number6" value="6"><br>
        <input type="button" id="number7" value="7">
        <input type="button" id="number8" value="8">
        <input type="button" id="number9" value="9"><br>
        <input type="button" id="stopresetBtn" value="STOP/RESET">
        <input type="button" id="number0" value="0">
        <input type="button" id="startBtn" value="START">
    </form>
    <script>
        for (let digit of "1234567890") {
            const button = document.getElementById("number" + digit);
            button.addEventListener("click", number);
        }
        let counter_length = 0;
        let counter = 0;
        function number(event) {
            if (counter_length >= 4) return;
            counter_length++;
            counter = counter * 10 + Number(event.target.value);
            const digits = String(counter).padStart(4, '0');
            const output = document.getElementById("output");
            output.innerHTML = digits.slice(0, 2) + ":" + digits.slice(2);
        }
    </script>
</body>
</html>
1Like

Comments

  1. @limemint

    Questioner

    お忙しい中、ご回答寄せていただきありがとうございます。
    私の実力に合わせた回答をしていただいたことに感謝いたします。
    回答してくださった大変貴重な内容をじっくり読み込んで実力アップに繋げたいと思います。

いろいろ調べたのですが、これといった答えが出てこず、こちらで質問しました。
「こういう調べ方すると出てくるよ」みたいなキーワードなどありましたら教えていただけるとありがたく思います。
「切り出し」とか「上書き」とかのキーワードでYou Tubeなど調べたのですが、出てきませんでした。

0Like

Comments

  1. @limemint

    Questioner

    ご回答ありがとうございます。
    そうなんです。
    私の実力不足で理解が難しい部分があり、時間をかけて理解しようと努めているのですが、なかなかできず、悩むことに時間をかけるよりもいろんな回答を見て少しでも理解への糸口が見つからないかと模索しているところでした。

基本的なことがいつくか抜けている気がします。

テキスト処理とHTML DOM(あるいはNodeでも)によるテキストの取得や操作(タグの中に書かれているテキストの操作)がとりあえずできないといくら答えのソースコードを提示されても理解できないでしょう。

まずはそういう辺りから学習なさってください。

onclick, jQueryは使わずにしたいのですが、 実装可能でしょうか?

可能ですが、今はイベント系処理やライブラリのことを気にする必要ありません。

0Like

Comments

  1. @limemint

    Questioner

    ご回答ありがとうございます。
    リンクまで貼っていただき感謝します。
    ご指摘の部分を再度学習したいと思います。

あくまで参考ですが。

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
        <body>
          <div id="output" style="display:flex;"><div id="output1">0</div><div id="output2">0</div>:<div id="output3">0</div><div id="output4">0</div></div>
            <script src="js/timer.js"></script>
            <form>
                <input type="button" id="number1" value="1" onclick="key_input(1)">
                <input type="button" id="number2" value="2" onclick="key_input(2)">
                <input type="button" id="number3" value="3" onclick="key_input(3)"><br>
                <input type="button" id="number4" value="4" onclick="key_input(4)">
                <input type="button" id="number5" value="5" onclick="key_input(5)">
                <input type="button" id="number6" value="6" onclick="key_input(6)"><br>
                <input type="button" id="number7" value="7" onclick="key_input(7)">
                <input type="button" id="number8" value="8" onclick="key_input(8)">
                <input type="button" id="number9" value="9" onclick="key_input(9)"><br>
                <input type="button" id="stopresetBtn" value="STOP/RESET">
                <input type="button" id="number0" value="0" onclick="key_input(0)">
                <input type="button" id="startBtn" value="START">
                
            </form>
        </body>
    </head>
   </html>
var input_number = "";
var number_array = new Array(4);
number_array[0] = 0;
number_array[1] = 0;
number_array[2] = 0;
number_array[3] = 0;

function key_input(num){
  number_array[0] = number_array[1];
  number_array[1] = number_array[2];
  number_array[2] = number_array[3];
  number_array[3] = num;
  document.getElementById("output1").innerHTML = number_array[0];
  document.getElementById("output2").innerHTML = number_array[1];
  document.getElementById("output3").innerHTML = number_array[2];
  document.getElementById("output4").innerHTML = number_array[3];
}

number_arrayという配列に、それぞれ押された値を入れていきます。
値が押されるたびに配列を一つひとつずらし、その内容をinnerHTMLで入れ込んでいます。
これだと、のちの計算もしやすいのでは?

0Like

Comments

  1. @limemint

    Questioner

    ありがとうございます!
    ちょうど配列を習ったばかりだったので復習を兼ねてこちらのコードで学ばせていただきます。
    丁寧な解説までつけてくださり感謝いたします。

Your answer might help someone💌