実現したいこと
selectで選択したものによって、相応のテキストを表示させたい。
前提
htmlのselectにある選択肢を選んだものによって、対応したテキストを表示させたいです。
発生している問題・エラーメッセージ
valueの値は、js 9行目で取得できているのは理解できるのですが、valueの値によっての振り分けが出来ておらず、どれを選択してもmessage01が出てきてしまいます。
該当のソースコード
html
1<body>2 <form action="">3 <label for="type">種別</label>4 <select name="" id="type">5 <option value="none">お選びください</option>6 <option value="apple">林檎</option>7 <option value="banana">ばなな</option>8 <option value="grape">ブドウ</option>9 </select>10 <p style="color: red;" id="message">選択しますと、ご案内が表示されます</p>11 </form>12 13 <script src="main.js"></script>14</body>
javascript
1const p =document.getElementById("message");2const message01 = "林檎は赤いです";3const message02 = "ばななは黄色です";4const message03 = "ブドウは紫色です";5 6const selectType = document.getElementById("type");7selectType.addEventListener( 'change',(e) => {8 let result = selectType.value;9 console.log(result);10 if (result = "apple") {11 console.log("1");12 p.textContent = message01;13 } else if(result = "banana") {14 console.log("2");15 p.textContent = message02;16 } else if(result = "grape"){17 console.log("3");18 p.textContent = message03;19 }20}); 21 22
試したこと
if文が原因のような気がするのですが、調べても解決できずなのでよろしくお願いいたします。
0 コメント