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

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

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

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

Q&A

解決済

3回答

9758閲覧

chromeで正しく動かないjavascript

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2018/03/08 05:44

下記のjavascriptが、chromeだと正常に作動しません。

具体的には、

■firefox
ボタンクリック➡正常に1回だけ変化する。

■chrome
ボタンクリック➡チカチカ変化し続けてしまう。

という状態です。

▼実際の動作
https://jsfiddle.net/rqmxk50c/7/

▼そのコード

html

1<div class="area"> 2 <div class="animal">ねこ</div> 3 <div class="btn">value挿入</div> 4</div> 5 6<div class="area"> 7 <div class="animal">いぬ</div> 8 <div class="btn">value変化</div> 9</div> 10 11<input class='abc' type=radio value='挿入前' checked> 12<div>value=<span id="output"></span></div> 13

javascript

1 2(function($){ 3 4//ボタンの「親要素area」のanimalを、valueに挿入➡chromeだとおかしい 5$(".btn").click(function(){ 6 var fuga = $(this).parent().find(".animal").get(0); 7 setInterval(function(){ 8 document.querySelector("input[type=radio].abc").value = fuga.textContent; 9 }); 10 11//現在valueを表示 12var target = document.getElementsByClassName("abc")[0]; 13var output = document.getElementById("output"); 14 setInterval(function(){ 15 output.innerHTML = target.value; 16 }); 17 18}); 19 20})(jQuery);

どなたか、原因をご指摘いただけませんでしょうか?
よろしくお願い致します。(>_<)

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

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

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

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

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

guest

回答3

0

原因をというかやりたいこととコードが一致していないと思います。

setIntervalって何かご存知でお使いですか?
何をやっているかわからないプログラムを適当に書いて
「思い通りに動く」可能性が何%くらいあるとお考えですか?

span内を入れ替えるだけならほとんどのコードが不要です。
「valueを入れ替える」など他にやりたいことがあるのならしっかり調べて
プログラムを記述してください。

javascript

1(function($){ 2 3//ボタンの「親要素area」のanimalを、valueに挿入 4$(".btn").click(function(){ 5 var fuga = $(this).parent().find(".animal").html(); 6 $("#output").html(fuga); 7 //setInterval(function(){ 8 //document.querySelector("input[type=radio].abc").value = fuga.textContent; 9 //}); 10 11//現在valueを表示 12//var target = document.getElementsByClassName("abc")[0]; 13//var output = document.getElementById("output"); 14 //setInterval(function(){ 15 //output.innerHTML = target.value; 16 //}); 17 18}); 19 20})(jQuery);

投稿2018/03/08 06:06

sousuke

総合スコア3828

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

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

退会済みユーザー

退会済みユーザー

2018/03/08 08:00

>setIntervalって何かご存知でお使いですか? おっしゃるとおり、別のご回答から流用しておりました。 >何をやっているかわからないプログラムを適当に書いて「思い通りに動く」可能性が何%くらいあるとお考えですか? だいたい100回やって全部しっぱいします。笑 さて今回は一番早くご回答いただき、さらにsetIntervalの削除で解決したのですけれど、setIntervalについてもう一歩詳細にご説明してくださった方をベストアンサーにゆずってあげてください。 迅速なご回答、どうもありがとうございます!
guest

0

ベストアンサー

わー、興味深いですね。

setInterval() メソッドは、一定の遅延間隔を置いて関数やコードスニペットを繰り返し呼び出します。

WindowOrWorkerGlobalScope.setInterval() - Web API インターフェイス | MDN

とありますから、Chromeの動作が正しいように思えます。

HTML Standardをざっと見てみましたが、なんと、timeout は必須の引数ではないのに、未定義の際の動作が記述されていないように見えました。(0以下の場合には0にする、となってる)実装に任されてるのかな……?

いずれにせよ、想定されている動作にはsetInterval()が不要のように思えます。setTimeout()を使ってはいかがですか?

投稿2018/03/08 06:21

編集2018/03/08 06:26
Lhankor_Mhy

総合スコア35865

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

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

退会済みユーザー

退会済みユーザー

2018/03/08 07:57

いつもありがとうございます。 setInterval()が不要だというのは最初の方のご回答にあり、それを消したところ正常に作動しました。 しかし、ではなぜ、ブラウザで違うのか。という疑問が残ります。Lhankor_Mhyさんのおかげで少し原因がわかった印象です。その意味で僭越ながらベストアンサーにさせて頂きました。 いろいろ参考になるリンク先もありがとうございます。
guest

0

setIntervalにどういう意図があるのかやはりちょっとわかりませんね
普通にデータをとってきて更新すればいいような気がします
そもそも一つしか要素のないラジオボタンへのこだわりもわからない

javascript

1$(function(){ 2 $(".btn").on('click',function(){ 3 var fuga = $(this).prev(".animal").text(); 4 $("input[type=radio].abc").val(fuga); 5 $("#output").text(fuga); 6 }); 7});

投稿2018/03/08 06:31

yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2018/03/08 07:55

うう、いつもありがとうございます。yambejpさんのご回答はいつもソッコー解決で、ありがたすぎます。 setIntervalはおっしゃる通り、以前のご回答から流用しただけでして、使い道がわかっておりませんでした。 >そもそも一つしか要素のないラジオボタンへのこだわり えへへ、そうですよね。笑
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問