質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

589閲覧

出力毎に改行する方法が分からない。

hayati

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/05/12 09:20

コード出力毎に改行して表示したいのですが、いくら調べてもその方法が見つからず困っています。

イメージ説明

javascript

1'use strict' 2 3 4 5 document.getElementById('button').addEventListener('click',()=>{ 6 const fizz = document.getElementById('fizz'); 7 const buzz = document.getElementById('buzz'); 8 const div = document.getElementById('output-area'); 9 const p = document.createElement('p'); 10 // console.log(fizz.value); 11 // console.log(buzz.value); 12 13 if(Number.isInteger(Number(fizz.value)) === false || Number.isInteger(Number(buzz.value)) === false || fizz.value ==='' || buzz.value === ''){ 14 p.textContent += '整数値を入力してください'; 15 div.appendChild(p); 16 }else{ 17 for(let i=1; i<100; i++){ 18 if(i%fizz.value === 0 && i%buzz.value === 0){ 19 p.textContent += `FizzBuzz${i}`; 20 div.appendChild(p); 21 }else if(i%fizz.value === 0){ 22 p.textContent += `Fizz${i}`; 23 div.appendChild(p); 24 }else if(i%buzz.value === 0){ 25 p.textContent += `Buzz${i}`; 26 div.appendChild(p); 27 } 28 } 29 } 30 });

html

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 <title>javascript課題②</title> 7 <style> 8 input{ 9 width: 140px; 10 } 11 h3{ 12 margin: 0; 13 } 14 .output{ 15 margin-top: 15px; 16 margin-bottom: 15px; 17 } 18 </style> 19</head> 20<body> 21 22 23 24 <h1>Fizzbuzz問題</h1> 25 26 <h3>FizzNum: <input type="text" id="fizz" placeholder="整数値を入力してください"></h3> 27 <h3>BuzzNum: <input type="text" id="buzz" placeholder="整数値を入力してください"></h3> 28 <button id="button">実行</button> 29 <h3 class="output">【出力】</h3> 30 <div id ="output-area"></div> 31 <script src="js/main.js"> 32 </script> 33</body> 34</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hayati

2020/05/13 09:27

そうですね。ありがとうございます。
guest

回答1

0

ベストアンサー

document.createElement('p');forの中でするようにすればよいのでは。

投稿2020/05/12 09:43

kei344

総合スコア69606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問