![]

・入力用と表示用のテキストボックスが２つ
・ラジオボタンが３つ
という画面があり、以下の仕様を満たしたく思っております。

１）入力用テキストボックスに入力し終わった数値を2倍した答えを、表示用テキストボックスに転記する
２）ラジオボタンが変更されたら、表示用テキストボックスの背景色を変更する（左から、無色・赤・黄）

そこで、テキストボックスの入力はonblurイベント、ラジオボタンはonClickイベントを使用することにしました。

テキストボックスに「100」と文字を入力し、カーソルを動かさずそのままマウスクリックでラジオボタンの変更を行ったところ、onblurイベントも動いてはいるようなのですが200の記載がなされず、後者のonClickが有効となり背景色のみ変更されます。

scriptが重複した場合、どちらも満たす、もしくは前者を活かし後者はｷｬﾝｾﾙさせるというような動きをさせたいのですがどのような実装を行うとよいでしょうか。Webはあまり詳しくないため、参考ページなどご教授頂けますと大変助かります。

x_x

2017/12/01 02:14

PHPとありますが、サーバー側の処理は関係あるのでしょうか？

megumi11222000

2017/12/01 02:35

ご質問有難うございます。私の印象ですとイベントの記載に問題があるのかと思っており、サーバー側に関係が無いと考えておりますが、どのような点がネックになり得そうでしょうか。

x_x

2017/12/01 02:38

そうであれば、タグも、タイトルからもPHPを外すべきかと思います。また、いまのソースは提示いただけませんか？

megumi11222000

2017/12/01 02:43

了解いたしまた。PHPで記載しておりましたため、そちらの実装にも関係ある可能性もあり、と思っていたのですが、関係が薄そうですので外したいと思います。ソースが膨大で、また該当箇所の転記も難しいため、提示できず申し訳ないです。。

x_x

2017/12/01 02:47

こちらでは再現させられないのですが、確認しているブラウザは何でしょうか？

megumi11222000

2017/12/01 02:49

ChromeとIEになります

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

回答2件

PHP　javascriptが重複した場合の挙動

重複とはなんだったのか……

そもそもの部分に混同がありそうなのでこの部分のみ回答しておきます。
ブラウザ(Chromeとする)とWebサーバ(Apach+PHP)のやり取りは概ねこのフローになっています。

Chrome等のブラウザからWebサーバにHTTPリクエストが飛ぶ
Webサーバ(Apache)はPHPを起動してHTMLファイルを生成する
WebサーバはChromeに生成したHTMLを返す
Chromeは帰ってきたHTMLを解析する
ChromeはHTMLの内部にJavaScriptの記述を発見し、それを実行してDOMを書き換える

ここで明確にしておきたいのは
PHPにとってHTMLやJavaScriptは単なる文字列であり、
その文字列をChromeがどう解釈しようが知ったことではありません。

エディタでHTMLファイルを開いて編集しても単なる文字列でしょ？
勝手に実行されたり、視覚的に表示したりしないでしょ？それと同じことです。

なのでPHPによって動的なJavaScriptを生成しても問題ありませんし、
生成したJavaScriptのコードが原因でPHPの挙動に影響が出る事はありえません。

投稿2017/12/01 02:42

miyabi-sun

総合スコア21158

megumi11222000

2017/12/01 02:50

ご記載頂いております内容はその通りであると思います。私がそういった点を全く理解していないため、トンチンカンな質問をしてしまっているのだと思います。yambejp様に頂いた内容が非常に参考になりましたため、再度確認を行ってみます。

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

ベストアンサー

テキストボックスにはoninput、ラジオボタンにはonchangeを利用して下さい

sample

javascript
1window.onload=function(){
2  document.querySelector('input[name=nyuryoku]').addEventListener('input',function(e){
3    document.querySelector('input[name=hyouji]').value=e.target.value;
4  });
5  document.addEventListener('change',function(e){
6    var t=e.target;
7    if(t.nodeName=="INPUT" && t.name=="color"){
8      var v=document.querySelector('input[name=color]:checked').value;
9      with(document.querySelector('input[name=nyuryoku]').classList){
10        remove('aka','kiiro');
11        if(v=="aka") add('aka');
12        if(v=="kiiro") add('kiiro');
13      }
14    }
15  });
16}

css
1input.aka{background-Color:red;}
2input.kiiro{background-Color:yellow;}
3input[readonly]{background-Color:gray;}

HTML
1<form>
2入力：<input type="text" name="nyuryoku"><br>
3表示：<input type="text" name="hyouji" readonly><br>
4<input type="radio" name="color" value="mushoku">無色
5<input type="radio" name="color" value="aka">赤
6<input type="radio" name="color" value="kiiro">黄色
7</form>

投稿2017/12/01 02:13

編集2017/12/01 02:35

yambejp

総合スコア114775

megumi11222000

2017/12/01 02:32

早急なご回答有難うございます。それぞれイベントについて調べてみたのですが、oninputですと満たしたい仕様に沿っておりませんでした。正確にはテキストには数値が入力されるため、入力され終わった時点で処理を行いたいです。私の質問が悪かったため、文を変更しています。そのため、意味がないのかもしれませんがonblurイベントとonchangeイベントで確認を行ったのですが、結果は同じでした。