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

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

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

HTMLのボタン2種類ある

  <span class="hljs-keyword">let</span> cnt2 =<span class="hljs-built_in"> document</span>.getElementById(<span class="hljs-string">'inp'</span>).<span class="hljs-keyword">value</span>;
   <span class="hljs-keyword">let</span> cnt =<span class="hljs-built_in"> document</span>.getElementById(<span class="hljs-string">'count'</span>).textContent;

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

広告

ボタンのテキストを変更

<span class="hljs-attribute">let cnt</span> = document.getElementById(<span class="hljs-string">'count'</span>).textContent;
<span class="hljs-attribute"> cnt</span> = <span class="hljs-string">"SAM23"</span>;

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

<span class="hljs-keyword">let</span> cnt = document.get<span class="hljs-constructor">ElementById('<span class="hljs-params">count</span>')</span>;
cnt.textContent = <span class="hljs-string">"SAM23"</span>;

これで動きました。

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

    <span class="hljs-keyword">let</span> cnt = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'count'</span>);
    cnt.addEventListener(<span class="hljs-string">"click"</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>()</span>{
    cnt.textContent = cnt.textContent + <span class="hljs-number">1</span>;

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

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

    cnt.textContent = parse<span class="hljs-constructor">Int(<span class="hljs-params">cnt</span>.<span class="hljs-params">textContent</span>)</span> + <span class="hljs-number">1</span>;

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

notYet
広告
samをフォローする
らくらくCAD

コメント

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