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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

796閲覧

javascriptでクラス属性のついているテキストを変更する方法

Beronika

総合スコア18

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/03/27 06:01

前提・実現したいこと

javascriptの命令で、あるidがついているdivを押した際に同じ名前のクラス属性のうちの一つのテキストを変えたいと考えています。
しかし、様々な方法を試しましたが、どのようにしたらいいのかが全くわからないです。

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

main.js:22 Uncaught TypeError: Cannot read property 'children' of undefined at HTMLDivElement.

該当のソースコード

javascript

1'use strict' 2 3{ 4 var win = document.getElementById("win"); 5 var lose = document.getElementById("lose"); 6 var percent = document.getElementsByClassName("percent"); 7 var select = document.getElementsByClassName("select"); 8 var reset = document.getElementById("reset"); 9 var score = document.getElementsByClassName("score"); 10 var win_per = document.getElementsByClassName("win_per"); 11 12 13 var counter1 = 0; 14 var counter2 = 0; 15 var winPer = 0; 16 17 function winnerbtn(){ 18 var i; 19 for (i = 0 ; i < select.length ; i++){ 20 select[i].children[0].addEventListener("click", ()=> { 21 counter1 ++; 22 score[i].children[0].textContent = counter1; 23 winPer = counter1 / (counter1 + counter2) * 100; 24 win_per[i].children[1].textContent = `${win_per.toFixed(2)}%`; 25 }) 26 } 27 } 28 29 winnerbtn(); 30 31 lose.addEventListener("click", () => { 32 counter2 += 1; 33 loser.textContent = counter2 34 win_per = counter1 / (counter1 + counter2) * 100; 35 percent.textContent = `${win_per.toFixed(2)}%`; 36 }) 37 38 reset.addEventListener("click", () => { 39 counter1 = 0; 40 counter2 = 0; 41 winner.textContent = 0; 42 loser.textContent = 0; 43 percent.textContent = "0%"; 44 }) 45} 46

html

1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>戦歴管理</title> 6 <link rel = "stylesheet" href = "css/styles.css"> 7 </head> 8 <body> 9 <div class = "container"> 10 <h1><img src= "img/main_logo.png" width = 500></h1> 11 <h1>戦歴管理表</h1> 12 <div class = "dekki"> 13 <p>デッキ名:占いミネア</p> 14 <a href = "" class = "btn">デッキをみる</a> 15 </div> 16 <div class = "characters"> 17 <div class = "character"> 18 <div class = "icon"> 19 <div class = "photo"><img src = "img/sword.png"></div> 20 <p>テリー</p> 21 </div> 22 <div class = "point"> 23 <div class = "score"> 24 <div class = "box1 winner" data-fig1 = "0">0</div> 25 <div class = "box1"></div> 26 <div class = "box1 loser"data-fig2 = "0">0</div> 27 <div class = "box1"></div> 28 </div> 29 <div class = "win_per"> 30 <div class = "box2">勝率</div> 31 <div class = "box2 percent">0%</div> 32 </div> 33 <div class = "select"> 34 <div class = "S-btn" id = "win">勝ち</div> 35 <div class = "S-btn" id = "lose">負け</div> 36 <div class = "S-btn" id = "reset">リセット</div> 37 </div> 38 </div> 39 </div> 40 <div class = "character"> 41 <div class = "icon"> 42 <div class = "photo"><img src = "img/wizard.png"></div> 43 <p>ゼシカ</p> 44 </div> 45 <div class = "point"> 46 <div class = "score"> 47 <div class = "box1 winner" data-fig1 = "1">0</div> 48 <div class = "box1"></div> 49 <div class = "box1 loser" data-fig2 = "1">0</div> 50 <div class = "box1"></div> 51 </div> 52 <div class = "win_per"> 53 <div class = "box2">勝率</div> 54 <div class = "box2 percent">0%</div> 55 </div> 56 <div class = "select"> 57 <div class = "S-btn" id = "win">勝ち</div> 58 <div class = "S-btn" id = "lose">負け</div> 59 <div class = "S-btn" id = "reset">リセット</div> 60 </div> 61 </div> 62 </div> 63 </div> 64 65 <script src="js/main.js"></script> 66 </body> 67</html> 68

試したこと

data属性を足してみた・・・今回の形ではいらないのではないかと感じた
ドットインストールのスロットマシンが一番近いと思い、動画を視聴
・・・あまりわからなかった。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

javascript

1 function winnerbtn(){ 2// var i; 3 for (let i = 0 ; i < select.length ; i++){

投稿2019/03/27 06:15

papinianus

総合スコア12705

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

.select.win_perの数が合わないのが原因では?

js

1 for (i = 0 ; i < select.length ; i++){ // select.length > win_per.length の時に 2 select[i].children[0].addEventListener("click", ()=> { 3 counter1 ++; 4 score[i].children[0].textContent = counter1; 5 winPer = counter1 / (counter1 + counter2) * 100; 6 win_per[i].children[1].textContent = `${win_per.toFixed(2)}%`; // 添え字の範囲を i が超える場合がある
訂正

すみません、よく見ると違いますね。
このループカウンタiがグローバル変数なので、イベントが呼ばれるときにはselect.lengthと同じ値になっているはずです。これはselectの添え字の範囲を超えるのでundefinedが返ります。

解決方法は、

js

1 for (let i = 0 ; i < select.length ; i++){

のようにブロックスコープを使うのが早いかと思います。

投稿2019/03/27 06:11

編集2019/03/27 06:17
Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2019/03/27 06:13

あ、いや、違うか。 スコープの問題ですね。訂正します。
Beronika

2019/03/27 08:34

ありがとうございます! 複雑なので、なんとなくですが、わかりました! 一番詳しく答えてくれたので、ベストアンサーにします!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問