前提

テキストボックスに色を変えたいテキストを入力し、ボタンを押すことで色を変えるシステムを作っています。エラーが発生してしまったため解決方法が知りたいです。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot set properties of undefied(setting 'color')

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>DOMの例</title>
    <script>
        function changeColor(){
            var target = document.getElementById("target");
            var after = document.getElementsByName("pattern").style.color = "red";
            //テキストボックスに入力した文字の抽出
            var regExp = new RegExp(document.pattern.before.value, "g");
            //抽出した文字列を赤色の文字列に置換
            target.innerHTML = target.innerHTML.replace(
                regExp,after);

        }
    </script>
</head>
<body>
    <div id="target">
        <h1>innerHTMLのテスト</h1>
        <p>これはDOMでinnerHTMLを使ったテストです</p>
        <h2>h2タグ</h2>
        <h3>h3タグ</h3>
    </div>

    <form name="pattern">
        <p>
            <input type "text" name="before">
            <input type="button" value="変更" onclick="changeColor()">
        </p>
    </form>



</body>

</html>

yambejp

2022/12/02 04:00

ソースを見る限り何をしたいかわかりません。 inputに入力→変更ボタンを押す→name=patternのformのスタイルシートでcolorをredにするということですか？ formのcolorを変えてもinputには反映されませんがそれで大丈夫ですか？その後のtargetをごちゃごちゃしているところも何がしたいのかわかりません

tanabota123

2022/12/02 04:55

例えばinputに「テスト」と入力して変更ボタンを押すと他の文字はそのままに「テスト」の文字のみが赤色になって表示されるシステム作りたいです。

yambejp

2022/12/02 05:00

とりあえず回答に追記しておきました。確認ください

行動規範の内容に同意します

回答3件

ベストアンサー

inputに「テスト」と入力して変更ボタンを押すと他の文字はそのままに「テスト」の文字のみが赤色になって表示される

「テスト」だけの色を変えるには、そこだけをタグで囲む必要があります。元のコードを尊重すると、以下のような感じです。

js
1function changeColor(){
2    var target = document.getElementById("target");
3    // テキストボックスに入力した文字の抽出
4    var regExp = new RegExp(document.pattern.before.value, "g");
5    // 抽出した文字列を赤色の文字列に置換
6    target.innerHTML = target.innerHTML.replace(
7        regExp, "<span style='color:red;'>$&</span>");
8}

<h4 data-foo="テスト"> のように属性値に目的の文字列が入っていると壊れるとか、<i>テ</i>スト のように既にタグがある場合とかは対応できません。

投稿2022/12/02 05:50

int32_t

総合スコア22019

とりあえずエラーをなくしたいなら
document.getElementsByName("pattern")がNodeListなので0番目のHTML要素を拾ってください

javascript
1document.getElementsByName("pattern")
2↓↓↓
3document.getElementsByName("pattern")[0]

質問の補足希望にも書きましたが、何をしたいのかわからないので、上記でエラーは消えますがおそらく想定している動作では無いと思います

追記

name=beforeの色を赤くしたいというだけならこう

javascript
1<script>
2function changeColor(){
3  document.querySelector("[name=before]").style.color = "red";
4}
5</script>
6<div id="target">
7<h1>innerHTMLのテスト</h1>
8<p>これはDOMでinnerHTMLを使ったテストです</p>
9<h2>h2タグ</h2>
10<h3>h3タグ</h3>
11</div>
12<form name="pattern">
13<p>
14<input type "text" name="before">
15<input type="button" value="変更" onclick="changeColor()">
16</p>
17</form>

投稿2022/12/02 04:02

編集2022/12/02 05:00

yambejp

総合スコア118169

.getElementsByName()で戻されるのは要素ではなく、要素を格納した配列（のようなもの）です。
「Element s 」と複数形になっているのはそのためです。
たとえ該当する要素が1つしかないとしても、長さが1の配列を戻します。

styleプロパティは要素にしか使えませんので、下記コードのように配列の中から要素を1つ指定すればうまくいくと思います。

diff
1- var after = document.getElementsByName("pattern").style.color = "red";
2+ var after = document.getElementsByName("pattern")[0].style.color = "red";

投稿2022/12/02 03:57