結果ボタンをクリックしても結果が反映されない

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>パスワード制作</title>
6    <link rel="stylesheet" href="stylesheet.css">
7    <script src="main.js"></script>
8  </head>
9  <body>
10    <div class="core">
11   <div class="main">
12    
13     
14     <h1>パスワードを作っていきます</h1>
15   </div>
16   <div class="form1" action="#">
17    <input type="text" id="input_name" value="">
18    <input type="button" onclick="func1()" value="結果">
19   </div>
20  
21
22  </div>
23  </body>
24</html>

css
1html{
2  display: inline-block
3}
4
5.core {
6  background-color: rgb(45, 45, 182);
7  height: 875px;
8  
9  
10}
11
12.main h1{
13  text-align: center;
14  
15}
16.form1{
17  width:150px;
18  margin-right: auto;
19  margin-left : auto;
20  text-align: center;
21  margin: 0 auto;
22  border: 2px solid gray;
23  padding: 50px;
24  }

javascript
1  function func1() {
2        var input_name = document.getElementById("input_name").value;
3           input_name = "あなたは「" + input_name + "」です。"
4        document.getElementById("output_name").innerHTML = input_name;
5      }
6
7
8

空欄に名前を入れたらあなたは～～です。と表示されるプログラムが作りたいです。
chromeの検証ツールでUncaught TypeError: Cannot set property 'innerHTML' of null
at func1 (main.js:4)
at HTMLInputElement.onclick (html:18)
とエラーが出て動きません

行動規範の内容に同意します

回答1件

ベストアンサー

エラーコードにもjsの４行目でエラーが生じていると出ている様に
document.getElementById("output_name").innerHTML = input_name;
と、id="output_name"に入力した文字が出力される様にコードを作ってありますが
html本体の方にoutput_nameというidが設定された要素がない為に出力ができない模様です。

予めhtmlの方で<span id="output_name"></span>等、出力先の要素を用意してあげる事で
思った通りの出力ができるはずです。

投稿2020/05/24 08:08