私はまだまだプログラムの初心者です。
どなたかご教授頂ければ幸いです。
javascriptでループ文を練習中にfizzbuzzのfor文を作ってみたので更に任意の数字までを
画面に表示させたいと思いプログラムを作ってみました。
しかしどうしてもfizzbuzzの様なfor文では思った様に動作しません。
写真の様な形で下側に任意の数までfizzbuzzをしたいのですが上手く表現出来ません。
fizzbuzzのfor文自体をdocument,writeで出力すると別のページへ遷移してしまうのでなんとか<p>タグの中へ入れたいのですが上手く行きません。
どのように記述すれば良いのでしょうか?
javascript
1(function () { 2 'use strict' 3 const numberInput = document.getElementById('number'); 4 const assessmentButton = document.getElementById('assessment'); 5 const resultDivided = document.getElementById('result-area'); 6 7 8 //ボタンを押した時の処理 9 assessmentButton.onclick = function () { 10 const textNumber = numberInput.value; 11 console.log(textNumber); 12 13 if (textNumber.length === 0) { //何も入力されなかった時 14 return; 15 } else if (isNaN(textNumber)) { //数字以外が入力された時 16 return; 17 } else { 18 result; 19 } 20 21 console.log('数値が入力されました'); 22 const header = document.createElement('h3'); 23 header.innerText = 'FizzBuzzスタート!'; 24 resultDivided.appendChild(header); 25 26 const paragraph = document.createElement('p'); 27 28 paragraph.innerText = result; 29 resultDivided.appendChild(paragraph); 30 31 32 }; 33 const result = 'ここにfizzbuzzの出力結果を表示したい'; 34 35})();
javascript
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>fizzbuzzを表示させよう</title> 8 <link rel="stylesheet" href="loop.css"> 9</head> 10<body> 11 <h1>fizzbuzzを表示させよう</h1> 12 <p>表示させたい数を整数で入力して下さい。(最大999までです)</p> 13 <input type="text" id="number" size="40" maxlength="3"> 14 <button id="assessment">表示する</button> 15 <div id="result-area"></div> 16 <script src="loop.js"></script> 17</body> 18</html>
回答1件
あなたの回答
tips
プレビュー