Skip to content

[HTML] 在網頁中當中點擊按鈕改變文字

Last Updated on 2021-06-04 by Clay

使用一個『輸入框』、一個『按鈕』，一個文字元件——然後在點擊按鈕時將輸入框中的文字顯示在文字元件上，這件單純的工作幾乎是互動界面的 Hello World 一般，可以在每次使用不同的框架寫界面時都先測試看看。

今天我要紀錄的，同樣是很單純地使用 HTML 以及 Javascript 來執行上述的任務。以下就開始吧！

程式碼

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>ClayAtlas-HTML</title>
</head>
<body>
     <input id="text">
     <input type="button" value="Enter" onclick="showButtonEvent()">
     <p id="changeText">NULL</p>
</body>
<script>
     function showButtonEvent()
     {
         var content = document.getElementById("text");
         document.getElementById("changeText").textContent=content.value;
     }
</script>
</html>



Output:

ClayAtlas-HTML

NULL

大致上就是這樣吧！

Tags:

Leave a Reply