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

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

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

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

HTML

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

Q&A

1回答

410閲覧

HTMLとJavascriptで作った診断ツールのボタンの装飾の方法

imaierika

総合スコア4

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2020/03/22 08:10

前提・実現したいこと

HTMLとJavascriptの組み合わせで診断ツールを作成しています。
そのツールで、ブラッシュアップとしてボタンを装飾したいです。
ボタンの画像を作成してURLを挿入したのですが表示されないため、表示させる方法をご存知の方がいらっしゃいましたら教えて頂きたいです。

発生している問題・エラーメッセージ

ボタンが表示されない。

実際のコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>診断ツール</title> </head> <body> <div> <h2>①自分のことがあまり好きではない。</h2> <p> <form id="question1"> <input type="radio" name="question1" value="0" checked="checked" />Yes <input type="radio" name="question1" value="12" />No </form> </p> </div>
<div> <h2>②人に自慢できる才能がある。</h2> <p> <form id="question2"> <input type="radio" name="question2" value="11" checked="checked" />Yes <input type="radio" name="question2" value="0" />No </form> </p> </div> <div> <h2>③夢を熱く語るのは少し恥ずかしい。</h2> <p> <form id="question3"> <input type="radio" name="question3" value="0" checked="checked" />Yes <input type="radio" name="question3" value="11" />No </form> </p> </div> <div> <h2>④周りの友人3人から自分が「どんな人と思われているか」的確に答えることが出来る。</h2> <p> <form id="question4"> <input type="radio" name="question4" value="11" checked="checked" />Yes <input type="radio" name="question4" value="0" />No </form> </p> </div> <div> <h2>⑤自分の長所と短所それぞれ7個すぐに答えることが出来る。</h2> <p> <form id="question5"> <input type="radio" name="question5" value="11" checked="checked" />Yes <input type="radio" name="question5" value="0" />No </form> </p> </div> <div> <h2>⑥将来の夢について30分以上熱く語ることが出来る。</h2> <p> <form id="question6"> <input type="radio" name="question6" value="11" checked="checked" />Yes <input type="radio" name="question6" value="0" />No </form> </p> </div> <div> <h2>⑦「あなたは誰ですか?」と聞かれて、名前や職業、役職を使わずに自分を説明できる。</h2> <p> <form id="question7"> <input type="radio" name="question7" value="11" checked="checked" />Yes <input type="radio" name="question7" value="0" />No </form> </p> </div> <div> <h2>⑧「あなたの才能は?」と聞かれて、1分以内に10個以上自分の才能を答えられる。</h2> <p> <form id="question8"> <input type="radio" name="question8" value="11" checked="checked" />Yes <input type="radio" name="question8" value="0" />No </form> </p> </div> <div> <h2>⑨「3年後の自分の人生」についてどこで、誰と、何をしていたいか分かっている。</h2> <p> <form id="question9"> <input type="radio" name="question9" value="11" checked="checked" />Yes <input type="radio" name="question9" value="0" />No </form> </p> </div> <center><button type="button" id="question_submit">診断する!</button></center> <br /> <div id="q_sum"></div> <div id="q_result"></div>
<script> // ラジオボタンの値をとる function get_value(id) { return document.getElementById(id)[id].value; } function last_check(k) { last = 0; for (var i = 0; i < k.length; i++) { if (k[i]) { last = i + 1; } } if (last !== 0) { return last - 1; } else { return 0; } } // 数値〇文字に function maru_su(su) { switch (su) { case 1: return '①'; case 2: return '②'; case 3: return '③'; default: } } // 表示 function display(sum, kagi_display) { document.getElementById('q_sum').textContent = '合計点数:' + sum; document.getElementById('q_result').textContent = kagi_display; } // ボタンがクリックされたら document.getElementById('question_submit').onclick = function() { var sum = 0; var kagi = [false, false, false]; var kagi_display = ''; // 合計 for (var i = 1; i <= 9; i++) { sum += Number(get_value('question' + i)); } if ( get_value('question1') === '0' || get_value('question4') === '0' || get_value('question7') === '0' ) { kagi[0] = true; } if ( get_value('question2') === '0' || get_value('question5') === '0' || get_value('question8') === '0' ) { kagi[1] = true; } if ( get_value('question3') === '0' || get_value('question6') === '0' || get_value('question9') === '0' ) { kagi[2] = true; } if (kagi[0] === false && kagi[1] === false && kagi[2] === false) { display(sum, kagi_display); return; } kagi_display = 'あなたには'; var last = last_check(kagi); for (var i = 0; i < kagi.length; i++) { if (kagi[i]) { kagi_display += '鍵' + maru_su(i + 1); if (i != 2 && i !== last) { kagi_display += 'と'; } } } kagi_display += 'が必要です'; display(sum, kagi_display); }; </script> </body> </html>

試したこと

<center><button type="button" id="question_submit">診断する!</button></center> ↑ この記述の「診断する!」の部分に <img src="https://drive.google.com/open?id=1nBhDkFxzYYopsKYgZ2Hl_161V-1EnW9x.jpg">

を入力しましたが、画像が表示されませんでした。

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

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

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

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

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

kei344

2020/03/22 08:35

(質問文は編集できます)質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
guest

回答1

0

<img>で指定している画像のURLhttps://drive.google.com/open?id=1nBhDkFxzYYopsKYgZ2Hl_161V-1EnW9x.jpgについて、ブラウザのURL欄に入力してアクセスしてみてください。
おそらく表示されないと思います。

Google ドライブ側で、URLを知っていれば誰でもアクセスできるように権限を設定したりする必要があると考えられます。

(そもそもGoogle ドライブでsrcに入力できるようなURLを生成できるのでしょうか..?)

投稿2020/03/22 11:25

編集2020/03/22 11:31
new1ro

総合スコア4528

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問