chromeで正しく動かないjavascript

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

具体的には、

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

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

という状態です。

▼そのコード

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);

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

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

回答3件

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

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

総合スコア3830

退会済みユーザー

2018/03/08 08:00

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

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

ベストアンサー

わー、興味深いですね。

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

総合スコア37413

退会済みユーザー

2018/03/08 07:57

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

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

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});