溫馨提示×

html點擊按鈕改變文字怎么實現(xiàn)

清風(fēng)
3726
2021-03-26 19:02:53
欄目: 編程語言

html點擊按鈕改變文字的實現(xiàn)方法：1.創(chuàng)建一個html文件；2.在html文件中添加html代碼架構(gòu)；3.在body標(biāo)簽里面使用p標(biāo)簽和button標(biāo)簽實現(xiàn)一個按鈕和一段文本；4.在html標(biāo)簽里面添加script標(biāo)簽并設(shè)置點擊按鈕改變文本的功能；5.通過瀏覽器方式查看設(shè)計效果。

html點擊按鈕改變文字怎么實現(xiàn)

html點擊按鈕改變文字的實現(xiàn)方法：

1.首先創(chuàng)建一個html文件。

2.在html文件中添加html代碼架構(gòu)。

<!DOCTYPE html>
<html>
    <head>
        <title>改變文字</title>
    </head>
    <body>
    </body>
</html>

3.然后在html代碼架構(gòu)中的body標(biāo)簽里面使用p標(biāo)簽和button標(biāo)簽實現(xiàn)一個按鈕和一段文本。

<p id="claa">我要改變這句話</p>
<button id="clab" type="button" onclick="myFunction()">
    點擊我吧，就能改變了哦
</button>

4.在html架構(gòu)中的html標(biāo)簽里面添加script標(biāo)簽并設(shè)置點擊按鈕改變文本的功能。

<script>
    function myFunction() {
        x = document.getElementById("claa");
        x.innerHTML = "終于能改變這句話了";
        y = document.getElementById("clab")
        y.innerHTML = "怎么樣，改變了吧"
    }
</script>

5.最后可通過瀏覽器方式閱讀html文件查看設(shè)計效果。

完整示例代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改變文字</title>
</head>
<body>
<p id="claa">我要改變這句話</p>
<button id="clab" type="button" onclick="myFunction()">
    點擊我吧，就能改變了哦
</button>
</body>
<script>
    function myFunction() {
        x = document.getElementById("claa");
        x.innerHTML = "終于能改變這句話了";
        y = document.getElementById("clab")
        y.innerHTML = "怎么樣，改變了吧"
    }
</script>
</html>

0 踩