前提・実現したいこと
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><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><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>
試したこと
<center><button type="button" id="question_submit">診断する!</button></center> ↑ この記述の「診断する!」の部分に <img src="https://drive.google.com/open?id=1nBhDkFxzYYopsKYgZ2Hl_161V-1EnW9x.jpg">を入力しましたが、画像が表示されませんでした。