質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

指定したテキストの色を変えたい

tanabota123
tanabota123

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

3回答

0グッド

0クリップ

235閲覧

投稿2022/12/02 03:51

前提

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

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

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>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

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

0

ベストアンサー

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

総合スコア17200

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

とりあえずエラーをなくしたいなら
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

総合スコア109059

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

0

.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

Cocode

総合スコア2231

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。