前提・実現したいこと
javascriptでボタンを押した時に入力した適当な文字が
適切に表示されるようにしたい。
発生している問題・エラーメッセージ
[object HTMLInputElement]
エラーメッセージ [object HTMLInputElement]
<div class="main-input"> <input type="text" id="do1" placeholder="やりたいこと1"> <input type="text" id="do2" placeholder="やりたいこと2"> <div id ="btn">決めてもらう</div> </div>HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>ソガリチョイス</title> 6 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 7 <link rel="stylesheet" href="styles.css"> 8 </head> 9 10 <body> 11 <div class="container"> 12 <h1>ソガリチョイス!</h1> 13 <img class="image131" src="image131-960x512.jpg" alt=""> 14 </div> 15 16 <div class="main-top"> 17 <h2>やりたいことを入力すると</h2> 18 <h3>ソガリがどちらを選ぶべきか選んでくれます!</h3> 19 </div> 20
<div class="main-result"> <p id="result" value=""> ここに結果を表示します</p> <p id="reset" class="hidden">もう一度やる</p> </div>
<script src="main.js"></script> </body> </html> ```JavaScript ソースコード (function(){ 'use strict'; var btn = document.getElementById('btn'); var do1 = document.getElementById('do1'); var do2 = document.getElementById('do2'); var result = document.getElementById('result'); var reset = document.getElementById('reset'); btn.addEventListener('mousedown',function(){ this.className = 'push'; }); btn.addEventListener('mouseup',function(){ this.className = ''; }); btn.addEventListener('click',function(){ var choise = [do1,do2]; var n = Math.floor(Math.random()*choise.length); result.textContent = choise[n]; reset.classList.remove('hidden'); }); reset.addEventListener('click',function(){ result.textContent = 'ここに結果を表示します!'; do1.value = ''; do2.value = ''; do1.focus(); });
//do1.focus();
})();
### 試したこと btn.addEventListener('click',function(){ var choise = [do1,do2]; var n = Math.floor(Math.random()*choise.length); result.textContent = choise[n]; reset.classList.remove('hidden'); }); の部分の値を変えてみたり式を模索してみたり何度もトライしましたが 画面に適切に表示されません。 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー