ボタン表示のさせ方を教えてください

前提・実現したいこと

デバッグテキストを表示するするためのボタンを作りたいです。
まずはボタンを作ろうとしたのですが文字をクリックできません。
エラーも出ていないのでどこを直せば動くのか分からなくなってしまいました。
どなたかお助けいただけますでしょうか…。

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

エラーは出ていませんが思った通りに表示されていません。

該当のソースコード

HTML,CSS,Javascript、vscode
1<template>
2<div id="text-button"><p id="text">クリック</p>
3</div>
4</template>
5
6<script>
7export default 
8
9  document.getElementById("text-button").onclick = function() {
10  document.getElementById("text").innerHTML = "クリック後テキスト";
11};
12
13</script>>
14
15<style>
16#text-button {
17  display: block;
18  cursor: pointer;
19  width: 160px;
20  text-align: center;
21  border: 1px solid #232323;
22}
23</style>

ex025

2020/08/19 01:44 編集

buttonタグを利用しない理由はあるのですか?

rannan

2020/08/19 01:46

それが…わからないです。すみません。ローカルのサイトに表示させようとするとこのページだけ真っ白になってしまいます。ほかのテキストは表示できたのでリンクもうまくいっているはずです。

maisumakun

2020/08/19 01:53

何かしらのJavaScriptのライブラリを使う前提でしょうか、それとも単にHTMLにそのまま書くような感じでしょうか？

ex025

2020/08/19 01:57

bodyタグに直接書くことはできないのですか。

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

回答3件

ベストアンサー

<template>タグを使っているからです。
<template>の中身は描画されません。

<template>が必要なければ、以下のような感じにしましょう。

HTML
1<button id="text-button" type="button">クリック</button>
2
3<script>
4  document.getElementById("text-button").addEventListener("click", function(evt) {
5    evt.target.innerHTML = "クリック後テキスト";
6  });
7</script>
8
9<style>
10#text-button {
11  display: block;
12  cursor: pointer;
13  width: 160px;
14  text-align: center;
15  border: 1px solid #232323;
16}
17</style>
18

投稿2020/08/19 01:56

root_jp

総合スコア4666

rannan

2020/08/19 02:11

なるほど、そうだったんですね。ありがとうございます！

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

HTML
1<body>
2    <div id="text-button"><p id="text">クリック</p></div>
3    <script>
4    document.getElementById("text-button").addEventListener('click', function(){
5        document.getElementById("text").innerHTML = "クリック後テキスト";
6    });
7    </script>
8    <style>
9    #text-button {
10        display: block;
11        cursor: pointer;
12        width: 160px;
13        text-align: center;
14        border: 1px solid #232323;
15    }
16    </style>
17</body>