溫馨提示×

html點擊按鈕改變文字怎么實現

清風
3792
2021-03-26 19:02:53
欄目: 編程語言

html點擊按鈕改變文字的實現方法:1.創建一個html文件;2.在html文件中添加html代碼架構;3.在body標簽里面使用p標簽和button標簽實現一個按鈕和一段文本;4.在html標簽里面添加script標簽并設置點擊按鈕改變文本的功能;5.通過瀏覽器方式查看設計效果。

html點擊按鈕改變文字怎么實現

html點擊按鈕改變文字的實現方法:

1.首先創建一個html文件。

2.在html文件中添加html代碼架構。

<!DOCTYPE html>

<html>

    <head>

        <title>改變文字</title>

    </head>

    <body>

    </body>

</html>

3.然后在html代碼架構中的body標簽里面使用p標簽和button標簽實現一個按鈕和一段文本。

<p id="claa">我要改變這句話</p>

<button id="clab" type="button" onclick="myFunction()">

    點擊我吧,就能改變了哦

</button>

4.在html架構中的html標簽里面添加script標簽并設置點擊按鈕改變文本的功能。

<script>

    function myFunction() {

        x = document.getElementById("claa");

        x.innerHTML = "終于能改變這句話了";

        y = document.getElementById("clab")

        y.innerHTML = "怎么樣,改變了吧"

    }

</script>

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

完整示例代碼如下:

<!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
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女