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

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

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

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2401閲覧

ボタンクリック時にfizzbuzzを出力させたい(for文)

shunsena

総合スコア16

for

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/12/12 06:25

編集2018/12/12 07:18

私はまだまだプログラムの初心者です。
どなたかご教授頂ければ幸いです。

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>

イメージ説明

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

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

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

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

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

m.ts10806

2018/12/12 06:56

コードは質問本文にcode機能を利用して提示してください。画像ではコードの読み取りが難しくコピペもできないため正しく再現確認がとれません
m.ts10806

2018/12/12 06:56

また「初心者アイコン」をご利用ください。本来「初心者」は質問要件ではありませんので
shunsena

2018/12/12 07:05

ご指摘頂きありがとうございます。 指摘いただいた点を編集させて頂きました。
m.ts10806

2018/12/12 07:06

code機能よく分からなければコード部分を選択して<code>ボタンを押すと良いです。リアルタイムでプレビューも出ているので投稿前にご確認ください
m.ts10806

2018/12/12 07:07

あ、htmlもあったほうが再現確認しやすいのでお手数でなければ
shunsena

2018/12/12 07:19

ご指摘ありがとうございます。 編集させて頂きました。 使い方をよく確認せず投稿しておりました。
kei344

2018/12/12 08:09

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
papinianus

2018/12/12 08:22

回答見て思ったんですが、その数値までのfizzbuzzを表示するのですか?一見すると特定の1つの数字だけをfizzbuzz判定するのかと思っちゃいました。
shunsena

2018/12/12 08:24

入力した数値までを全て出力したいです。 今はfor文で作成が上手くいかないので簡単な1行の文章出力にしております。
guest

回答1

0

ベストアンサー

javascript

1 } else { 2 result; 3 }

ここのelse処理は不要かと

javascript

1const result = 'ここにfizzbuzzの出力結果を表示したい';

この宣言も

javascript

1 paragraph.innerText = result;

ここで算出するものですから不要です

で、

javascript

1 paragraph.innerText = 'ここにfizzbuzzの出力結果を表示したい';

こうなるんですが、fizzbuzzに感しては求めたものを入れればいいかと思いますので、頑張ってfizzbuzz実装してみてください(コードが書けないプログラマ志願者を見分ける手法なので頑張ってほしい)

※文字列結合および文字列ー>数値は

javascript

1textNumber = textNumber - 0; // これでtextNumberは数値になる 2 3var str = ""; 4for(var i = 1; i <= textNumber; i++) { 5 str += "hoge"; // 実際はfizzbuzzで求めた文字列を結合していく 6} 7 8paragraph.innerText = str; // 求まったものを入れる

っていう感じでできます

投稿2018/12/12 08:11

rururu3

総合スコア5545

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

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

shunsena

2018/12/12 08:38

fizzbuzzの結果を加算代入演算子で結合させていくと思い通りに出力されました!! まだまだfor文やif文の理解が低かったみたいです。 もっと勉強して自分で作成できる様に精進致します。 お忙しい中、ご返答頂きありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問