ボタンの数を増やすのに、switch文に代えられたらなと、思ったのですが
pushbutton関数の引数(0や1、2…)をswitch文のcase 0:~case 2:等にマッチさせる
案が浮かびません。
方法があるなら教えてください。よろしくお願いします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScript training</title>
</head>
<body>
<form>
<input type="button" value="button0" onclick="pushbutton(0)">
<input type="button" value="button1" onclick="pushbutton(1)">
<input type="button" value="button2" onclick="pushbutton(2)">
</form>
<div id="push">message</div>
<script>
var num=0;
function pushbutton(num){
if(document.getElementById){
if(num==0){
document.getElementById("push").innerHTML="I pushed the button0";
}else if(num==1){
document.getElementById("push").innerHTML="I pushed the button1";
}else{
document.getElementById("push").innerHTML="I pushed the button2";
}
}
}
</script>
</body>
</html>
No.2ベストアンサー
- 回答日時:
特定divのinnerHTMLを書き換えるだけならリストから参照させる方が楽でしょう
<script>
function pushbutton(num){
var list={
0:"I pushed the button0"
,1:"I pushed the button1"
,2:"I pushed the button2"
};
document.getElementById("push").innerHTML=list[num];
}
</script>
配列の勉強してた時、var obj = {name:'Test', old:40};みたいなのをやってた事を思い出しました。
switch以外にも楽ちんな方法って意外とあるモノですね。
ありがとうございます。
No.1
- 回答日時:
この次元の話ならこうでいいのでは。
function pushbutton(num){
document.getElementById("push").innerHTML = "I pushed the button" + num.toString();
}
今後、条件に応じて処理を切り替えるために、switch()を利用したいならば、こう。
function pushbutton(num){
switch (num) {
case 0:
document.getElementById("push").innerHTML = "I pushed the button0";
break;
case 1:
document.getElementById("push").innerHTML = "I pushed the button1";
break;
case 2:
document.getElementById("push").innerHTML = "I pushed the button2";
break;
}
}
ボタンが増えるにつれて、switch()を追記してく形が汚くなっていって視認性が悪く嫌いならば、こう。
function pushedButton0()、function pushedButton1()などにそれぞれの動作を独立させて記述するので、3とか4とか増えても、関数だけ追加すれば済む。
function pushbutton(num){
eval("pushedButton" + num + "()");
}
function pushedButton0() {
document.getElementById("push").innerHTML = "I pushed the button0";
}
function pushedButton1() {
document.getElementById("push").innerHTML = "I pushed the button1";
}
function pushedButton2() {
document.getElementById("push").innerHTML = "I pushed the button2";
}
toString()は何か勉強した気がしますが、evalっていうのは知りませんでした。
switch以外にも意外と選択する方法ってあるモノですね。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScript window.openで開く...
-
FireFoxのjavascriptで自動でキ...
-
showModalDialogで開いた画面を...
-
javascriptのdocument.allにつ...
-
Javascriptのhtml出力についてa...
-
ラジオボタンでreadonlyの切替え
-
プルダウンを複数使い、ページ...
-
選択によってsubmitボタンの色...
-
DOM要素を削除しても、イベント...
-
Null またはオブジェクトではあ...
-
Javascriptで定期的にF5を押す...
-
javascriptの基本的なことだと...
-
文字を一文字ずつ表示
-
compatModeとは?
-
LaTeX:数式を等号揃えにする方法
-
このjavascriptのif文、条件式...
-
excle VBA とweb上の検索を利用...
-
C#OpenCv V4にのエラーに関する...
-
同じIDで定義した要素の配列を...
-
google apps scriptの終了のさせ方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
codejump 模写コーディングgall...
-
このjavascriptのif文、条件式...
-
文字を一文字ずつ表示
-
DOM要素を削除しても、イベント...
-
FireFoxのjavascriptで自動でキ...
-
Javascriptのhtml出力についてa...
-
excle VBA とweb上の検索を利用...
-
Null またはオブジェクトではあ...
-
webページ上のTabキーの動き
-
XMLでのAttributeを持ったNode...
-
JavaScript window.openで開く...
-
ブラウザのウィンドウサイズに...
-
javascriptのdocument.allにつ...
-
javascriptの基本的なことだと...
-
responseTextについて
-
showModalDialogで開いた画面を...
-
iframeのソースを取得したい
-
removeEventListenerの必要性
-
クリッカブルマップのリンク部...
-
ラジオボタンをクリックしたい
おすすめ情報