概要
html jsを用いて2つのタスクを記入し乱数でどちらかを行うべきか提示してもらうプログラムを作成している
##問題点
htmlのinput部分のどちらかが未記入の場合エラーとhtmlに記述させたいがif文の判定ができていない。
jsのsubmit.addEventListener部文だが、クリックされた時関数で乱数を発生させその乱数が0.5以上ならtask01
0.5以下ならtask02に決定するという処理を行なっている。
しかし現在のプログラムでは常にtask01が表示されるためこちらの問題に関しても修正点がわかれば教えていただきたい
HTMLコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head> <body> <h1>やること決める君</h1><style> body { text-align: center; } </style>
</body> </html><form action=""> <input id="task01" type="text" placeholder="やりたいこと書いてね"> <input id="task02" type="text" placeholder="やりたいこと書いてね"> <button id="submit" type="submit">確定</button> </form> <p id="error"></p> <h2 id="open"></h2> <script src="./main.js"></script>
##jsコード
//変数宣言
const task01 =document.getElementById('task01');
const task02 =document.getElementById('task02');
const submit = document.getElementById('submit');
const open = document.getElementById('open');
const error = document.getElementById('error');
//イベント発生時に関数実行
submit.addEventListener('click',(e)=>{
//入力漏れの場合
if(task01.value === null || task02.value === null ){
error.innerHTML = "タスクを埋めてください";
}
e.preventDefault();
//乱数の発生
let random = Math.random();
let result;
console.log(random);
//ここが怪しい if(random <= 0.5){ result = task01.value; } else{ result = task02.value; } console.log(result); open.innerHTML = result;
});
回答2件
あなたの回答
tips
プレビュー