Javscript : サンプル「カウンター」

実際にクリックできるサンプルです。
Resetで0に戻せます。
一度カウントアップしたら、「スペースバー」でもアップします。
スポンサーリンク

ボタンのテキストを取得する

HTMLのボタン2種類ある

  let cnt2 = document.getElementById('inp').value;
   let cnt = document.getElementById('count').textContent;

input:button は「.value」で取得
buttonタグは、「textContent」で取得

ボタンのテキストを変更

let cnt = document.getElementById('count').textContent;
 cnt = "SAM23";

これでは、何も変わりません。
変数cntは、変更されてますがボタン表示文字は変わりません。
変数の指定方法が違いました、

let cnt = document.getElementById('count');
cnt.textContent = "SAM23";

これで動きました。

ボタンのテキストに「+1」

    let cnt = document.getElementById('count');
    cnt.addEventListener("click",function(){
    cnt.textContent = cnt.textContent + 1;

これだと文字列と処理されてしまいます。

後ろに、「1」が追加されるだけ

    cnt.textContent = parseInt(cnt.textContent) + 1;

parseInt()で文字列を数値に変えるとちゃんと動きます。

コメント

タイトルとURLをコピーしました