JavaScriptの変数をHTMLにうまくに表示させたい

実現したいこと
JavaScriptの値をHTMLに表示させる。

今の状態
HTMLでテキストボックスを作成し、ボタンが押されたら入力された値をJavaScriptに渡し、その値を計算式に落としこみ、出た結果を変数として定義し、再度HTMLに渡すことはできたのですが、その値をうまく表示させることができません。ボタンを押すと値は表示できますが、逆に値しか表示されず、タイトルやテキストボックスは消えてしまいます

理想
ボタンが押されれば、JavaScriptで計算、定義された値が、オブジェクト（タイトルやテキストボックスやボタン）は消えないまま、その下に表示されるようにしたい

HTMLJavaScript
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9
10  <meta property="og:title" content="">
11  <meta property="og:type" content="">
12  <meta property="og:url" content="">
13  <meta property="og:image" content="">
14
15  <link rel="manifest" href="site.webmanifest">
16  <link rel="apple-touch-icon" href="icon.png">
17  <!-- Place favicon.ico in the root directory -->
18<style>
19
20</style>
21  <!-- CSS only -->
22<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
23
24  <meta name="theme-color" content="#fafafa">
25</head>
26
27
28
29<!DOCTYPE html>
30<html lang="ja">
31<head>
32<meta charset="UTF-8">
33<title>サンプル</title>
34</head>
35
36
37<body>
38
39  <head>
40    <meta charset="UTF-8">
41    <title>HTML Char size Sample</title>
42  </head>
43    <body>
44  <font size="6"><b>点数記録</b></font><br>
45
46
47  <br>
48  <div class="input-group" id="kokugo">
49    <span class="input-group-text">国語</span>
50    <input type="text" aria-label="First name" class="form-control" name="kokugos" id="kokugos" required>
51    <input type="text" aria-label="Last name" class="form-control" name="kokugoh" id="kokugoh">
52  </div>
53
54  <div class="input-group" id="rika1">
55    <span class="input-group-text">理１</span>
56    <input type="text" aria-label="First name" class="form-control" name="rika1s" id="rika1s">
57    <input type="text" aria-label="Last name" class="form-control" name="rika1h" id="rika1h">
58  </div>
59
60  <div class="input-group" id="rika2">
61    <span class="input-group-text">理２</span>
62    <input type="text" aria-label="First name" class="form-control" name="rika2s" id="rika2s">
63    <input type="text" aria-label="Last name" class="form-control" name="rika2h" id="rika2h">
64  </div>
65
66  <div class="input-group" id="tiri">
67    <span class="input-group-text">地理</span>
68    <input type="text" aria-label="First name" class="form-control" name="tiris" id="tiris">
69    <input type="text" aria-label="Last name" class="form-control" name="tirih" id="tirih">
70  </div>
71
72  <div class="input-group" id="rekisi">
73    <span class="input-group-text">歴史</span>
74    <input type="text" aria-label="First name" class="form-control" name="rekisis" id="rekisis">
75    <input type="text" aria-label="Last name" class="form-control" name="rekisih" id="rekisih">
76  </div>
77
78  <div class="input-group" id="daisuu">
79    <span class="input-group-text">代数</span>
80    <input type="text" aria-label="First name" class="form-control" name="daisuus" id="daisuus">
81    <input type="text" aria-label="Last name" class="form-control" name="daisuuh" id="daisuuh">
82  </div>
83
84  <div class="input-group" id="zukei">
85    <span class="input-group-text">図形</span>
86    <input type="text" aria-label="First name" class="form-control" name="zukeis" id="zukeis">
87    <input type="text" aria-label="Last name" class="form-control" name="zukeih" id="zukeih">
88  </div>
89
90  <div class="input-group" id="eigo">
91    <span class="input-group-text">英語</span>
92    <input type="text" aria-label="First name" class="form-control" name="eigos" id="eigos">
93    <input type="text" aria-label="Last name" class="form-control" name="eigoh" id="eigoh">
94  </div>
95
96  <div class="input-group" id="kagi">
97    <span class="input-group-text">家技</span>
98    <input type="text" aria-label="First name" class="form-control" name="kagis" id="kagis">
99    <input type="text" aria-label="Last name" class="form-control" name="kagih" id="kagih">
100  </div>
101
102  <div class="input-group" id="onngaku">
103    <span class="input-group-text">音楽</span>
104    <input type="text" aria-label="First name" class="form-control" name="onngakus" id="onngakus">
105    <input type="text" aria-label="Last name" class="form-control" name="onngakuh" id="onngakuh">
106  </div>
107
108  <div class="input-group" id="bizyutu">
109    <span class="input-group-text">美術</span>
110    <input type="text" aria-label="First name" class="form-control" name="bizyutus" id="bizyutus">
111    <input type="text" aria-label="Last name" class="form-control" name="bizyutuh" id="bizyutuh">
112  </div>
113
114  <div class="input-group" id="hotai">
115    <span class="input-group-text">保体</span>
116    <input type="text" aria-label="First name" class="form-control" name="hotais" id="hotais">
117    <input type="text" aria-label="Last name" class="form-control" name="hotaih" id="hotaih">
118  </div>
119
120  <center>
121  <button type="button" class="mt-3 btn btn-outline-secondary" onclick="cancan()">取り消し</button>
122  <button type="button" class="mt-3 btn btn-outline-primary" onclick="entano()">実行</button>
123  </center>
124
125  <script type="text/javascript" language="javascript">
126    function entano(){
127  var kokugos = document.getElementById("kokugos").value;
128  var kokugoh = document.getElementById("kokugoh").value;
129  var rika1s = document.getElementById("rika1s").value;
130  var rika1h = document.getElementById("rika1h").value;
131  var rika2s = document.getElementById("rika2s").value;
132  var rika2h = document.getElementById("rika2h").value;
133  var tiris = document.getElementById("tiris").value;
134  var tirih = document.getElementById("tirih").value;
135  var rekisis = document.getElementById("rekisis").value;
136  var rekisih = document.getElementById("rekisih").value;
137  var daisuus = document.getElementById("daisuus").value;
138  var daisuuh = document.getElementById("daisuuh").value;
139  var zukeis = document.getElementById("zukeis").value;
140  var zukeih = document.getElementById("zukeih").value;
141  var eigos = document.getElementById("eigos").value;
142  var eigoh = document.getElementById("eigoh").value;
143  var kagis = document.getElementById("kagis").value;
144  var kagih = document.getElementById("kagih").value;
145  var onngakus = document.getElementById("onngakus").value;
146  var onngakuh = document.getElementById("onngakuh").value;
147  var bizyutus = document.getElementById("bizyutus").value;
148  var bizyutuh = document.getElementById("bizyutuh").value;
149  var hotais = document.getElementById("hotais").value;
150  var hotaih = document.getElementById("hotaih").value;
151  
152  let soten = Number(kokugos) + Number(rika1s) + Number(rika2s) + Number(tiris) + Number(rekisis) + Number(daisuus) + Number(zukeis) + Number(eigos) + Number(kagis) + Number(onngakus) + Number(bizyutus) + Number(hotais);
153  
154  var heikin = Number(kokugoh) + Number(rika1h) + Number(rika2h) + Number(tirih) + Number(rekisih) + Number(daisuuh) + Number(zukeih) + Number(eigoh) + Number(kagih) + Number(onngakuh) + Number(bizyutuh) + Number(hotaih);
155  
156  var syusoten = Number(kokugos) + Number(rika1s) + Number(rika2s) + Number(tiris) + Number(rekisis) + Number(daisuus) + Number(zukeis) + Number(eigos);
157  
158  var syuheikin = Number(kokugoh) + Number(rika1h) + Number(rika2h) + Number(tirih) + Number(rekisih) + Number(daisuuh) + Number(zukeih) + Number(eigoh);
159  
160  var hukusoten;
161  hukusoten = Number(kagis) + Number(onngakus) + Number(bizyutus) + Number(hotais);
162  
163  var hukuheikin;
164  hukuheikin = Number(kagih) + Number(onngakuh) + Number(bizyutuh) + Number(hotaih);
165  
166  var syutokutensa;
167  syutokutensa = syusoten - syuheikin;
168  
169  var hukutokutensa;
170  hukutokutensa = hukusoten - hukuheikin;
171  
172  var tokutensa;
173tokutensa = soten - heikin;
174
175document.write(soten);
176    document.write(heikin);
177}
178
179  
180  </script>
181
182    
183</body>
184
185        
186
187</html>

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

回答1件

ベストアンサー

基本、document.write()を使わないほうが良いです。
いったんHTMLのロードが完了した文書中で document.write() を使うと、文書の内容が消えてしまいます。

出力先のHTML要素を用意しておいて、そこに書き込むのがよいでしょう。

html
1<output id="soten"></output>
2<output id="heikin"</output>

js
1//document.write(soten);
2//    document.write(heikin);
3  document.querySelector('#soten').value = soten;
4  document.querySelector('#heikin').value = heikin;
5