javascript、if文を使って、
テキストボックスの入力された文字が
1の場合はredに、
2の場合はgreenに、
それ以外の場合はblueに、
ボックスのbackground-colorを変えたいと思っています。
"それ以外"
elseを使用した時の
"それ以外"の指定の仕方です。単純に3以上と言うのであれば条件式を用いて>3でいいのかな、、、?と思うのですが、
(間違っていたらすみません。)
それ以外全て、と言うのはどう指定したらいいものか、と迷っております。
どうかご教授ください。
2/15編集、追記。
ご回答頂いた内容などを元に、迷走を繰り返してきました。
申し訳ありません。いまだ解決できずにいます。
現在以下のような形になっております。
コード本文にも記載しているのですが、
document.getElementByIdを使用して、
ifが成り立った時の処理を行う方法を模索しています。
この場合、if、テキストボックスに入力された文字が1だった場合、ボックスをredにする。
です。
その時に、実際色を変えるべきボックスを、どう指定したらいいか悩んでいます。
コードの中に、//この行です// と記載のある行の、直近の()内の指定の仕方です。
javascript,jQuery
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>if文</title> 6 <link rel="stylesheet" type="text/css" href="base.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 8 <script> 9 $(function(){ 10 $("#button").on("click", function(){ 11 var atai = $(":text").val(); 12 13 if ((atai == 1)) { 14 15 { 16 if(document.getElementById) 17 { 18 document.getElementById("") //この行です。// 19 .style.color = "red"; 20 } 21 }console.log(1); 22 } 23 24 else if ((atai == 2)){ 25 console.log(入力値2); 26 } 27 28 else { 29 console.log(他); 30 } 31 }); 32 }); 33 </script> 34</head> 35 36<body> 37 <input type="text" id="value"> 38 <input type="button" id="button" value="ボタン"> 39 <div id="box"> 40 </div><!-- button --> 41 42</body> 43</html> 44
css
1@charset "UTF-8"; 2/* reset */ 3body, h1, h2, h3, h4, h5, h6, p, address, 4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td { 5 margin: 0; 6 padding: 0; 7 border: none; 8 font-style: normal; 9 font-weight: normal; 10 font-size: 100%; 11 text-align: left; 12 list-style-type: none; 13 border-collapse: collapse; 14} 15 16textarea { font-size: 100%; vertical-align:middle;} 17img { border-style: none; display: block; } 18hr { display: none; } 19em{font-style: normal} 20input{line-height:auto;vertical-align:middle;} 21strong.more{color:#c30} 22a{text-decoration: none;} 23 24html { 25 26} 27 28body { 29 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif; 30 padding: 100px; 31} 32 33* { 34 -webkit-box-sizing: border-box; 35 -moz-box-sizing: border-box; 36 -o-box-sizing: border-box; 37 -ms-box-sizing: border-box; 38 box-sizing: border-box; 39} 40 41 42#box { 43 width: 320px; 44 height: 180px; 45 background-color: #aaa; 46 margin-top: 40px; 47} 48 49if { 50 background-color: red 51} 52 53else if{ 54 background-color: green 55} 56 57else{ 58 background-color: blue 59}
回答2件
あなたの回答
tips
プレビュー