chihiro1364
@chihiro1364

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

質問です。

Q&A

Closed

for...of文で加算代入演算子が繰り返されるものとされないものの違いについての
疑問を解消したく投稿しました。

js(ES6)を操作していて、
ボタンを押すと特定の箇所のtextノード内容が変わる構文をしました。

関数内に作った変数resultにfor...of文でテキストノードに":"を加算代入した後、
変数resultへ繰り返し加算代入演算させた所、":"のみがボタンを押す度追加されます。

":"が追加されない構文も書けたのですがなんで追加されないのか分かりません。
そもそも":"がボタンを押す度、変数に追加されるならtextノードも
ボタンを押す度変数に追加されるのでは無いかと疑問に思います。
どうぞよろしくお願い致します。

HTML文

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>さまざまな要素取得サンプル</title>
        <style type="text/css">
            .redText {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>以下の選択肢から<span class="redText">該当するもの</span>を選択して下さい。</p>
        <form action="#">
            <lavel><input type="checkbox" name="skill" value="1">HTML</lavel>
            <lavel><input type="checkbox" name="skill" value="2">JavaScript</lavel>
            <lavel><input type="checkbox" name="skill" value="3">PHP</lavel>
            <lavel><input type="checkbox" name="skill" value="4">SQL</lavel>
        </form>
        <button type="button" onclick="test1()">タグ名で取得</button><br>
        <button type="button" onclick="onClassButton()">クラス名で取得</button><br>
        <button type="button" onclick="onNameButtonClick()">name属性で取得</button><br>
        <p id="result">結果表示</p>
        <script type="text/javascript" src="ele.js"></script>
    </body>
</html>

ボタンを押す度、":"が加算代入演算される構文。

function test1() {
    let tags = document.getElementsByTagName("button");
    let result = "";
    for (tag of tags) {
        tag.textContent += ":";
        result += tag.textContent;
    }
    let test = document.getElementById("result");
    test.textContent = result;
}

何度ボタンを押しても内容が追加されない構文。

function test1() {
    let tags = document.getElementsByTagName("button");
    let result = "";
    for (tag of tags) {
        result += tag.textContent + ":";
    }
    let test = document.getElementById("result");
    test.textContent = result;
}

0

2Answer

ボタンを押す度、":"が加算代入演算される構文。何度ボタンを押しても内容が追加されない構文。のコードが一緒になっているかもしれません・・・?

コピペ内容など正しいかご確認いただいた方がいいかもしれません!

1Like

Comments

  1. @chihiro1364

    Questioner

    ありがとうございます!!
    指摘頂いた通り、コードが一緒になってました!!
    コードの修正をして更新しました!!

確認しました!

ボタンを押す度、":"が加算代入演算される構文。の方では、ループの中tag.textContent += ":";という記述がありボタンのラベル(HTML)にコロンが追加されていってしまっています!

HTMLタグ内容は変えずにresultの文字列の変数のみに追加するのが正しいでしょうから、この辺が悪さしていると思われます!

(ボタン上のラベルが変わっていることをご確認ください)

後者の方はボタンのHTMLはループ内で編集していない(tagの変数の内容に変更が加わっていない)形で、文字列の変数のみ更新されているからだと思います!

1Like

Comments

  1. @chihiro1364

    Questioner

    解決しました、ありがとうございます!
    仰られる様に、よく見たらbuttonタグのテキストノードに":"が追加されてて悪さしてました。

    後者のソースについても関数内に変数を付けていたのを忘れていてなんで増えないのか疑問でしたが説明見て理解出来ました。

    ありがとうございます!

Your answer might help someone💌