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

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

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

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

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

Q&A

解決済

1回答

608閲覧

javascriptでボタンが生成できません

kurokoSin

総合スコア133

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

JavaScript

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

0グッド

0クリップ

投稿2020/06/27 04:41

概要

javascript を使用して動的にボタンの生成を行いたいのですが、表示できません。
Ubuntu + Firefox、Ubuntu + Chromium で表示ができませんでした。

また表示できない環境のコンソールにもエラーが出ませんでした。

修正方向の希望としましては、ソースかブラウザの設定を変更して、ボタンを表示できるようにしたいです。
(他のライブラリを導入しない、jsファイルは外だしのままにしておきたい)

以上、よろしくお願いします。

環境

Linux (Ubuntu 18.04 LTS)
FireFox 77.0.1 (64-bit)
Chromium 83.0.4103.106(Official Build)snap (64 ビット)

ソース

index.html

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>ほげほげ</title> 6 <link rel="stylesheet" href="css/styles.css"> 7</head> 8<body> 9 <script src="./js/main.js"> 10 </script"> 11</body> 12</html>

css/styles.css

css

1/* 追加ボタンの書式設定 */ 2.addition { 3 display: flex; 4 margin: 10px auto; 5}

js/main.js

javascript

1{ 2 // 追加ボタンをinputタグで作り、bodyタグの子要素に入れる 3 let key = 0; 4 const addButton = document.createElement('input'); 5 addButton.classList.add('addition'); 6 addButton.type = 'button'; 7 addButton.value = '追加'; 8 document.body.appendChild(addButton); 9}

確認方法

ローカルファイルの読み取りは、ブラウザの仕様上制限がかかっているとのことですので、
簡易webサーバ(=WEBrick)を立ち上げて、ブラウザでhttp://localhost:5000/に接続しております。

コマンド

$ cd [index.htmlのある場所] $ ruby -run -e httpd . -p 5000

標準出力のログ

[2020-06-27 13:31:31] INFO WEBrick 1.4.2 [2020-06-27 13:31:31] INFO ruby 2.5.1 (2018-03-29) [x86_64-linux-gnu] [2020-06-27 13:31:31] INFO WEBrick::HTTPServer#start: pid=5063 port=5000 127.0.0.1 - - [27/Jun/2020:13:31:39 JST] "GET / HTTP/1.1" 304 0 - -> / 127.0.0.1 - - [27/Jun/2020:13:31:40 JST] "GET /js/main.js HTTP/1.1" 304 0 http://localhost:5000/ -> /js/main.js 127.0.0.1 - - [27/Jun/2020:13:31:40 JST] "GET /css/styles.css HTTP/1.1" 304 0 http://localhost:5000/ -> /css/styles.css

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

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

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

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

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

sousuke

2020/06/27 05:16

main.jsは抜粋ですか?全文ですか?
guest

回答1

0

ベストアンサー

</script"> → </script>

投稿2020/06/27 05:29

shun-K

総合スコア508

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

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

kurokoSin

2020/06/27 09:06

あーーーー!ありがとうございます!!! お恥ずかしい。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問