连续点击按钮，p内文字style会切换，但最后显示文字时，one和two不会切换，为什么？怎么写才对？-慕课网

连续点击按钮，p内文字style会切换，但最后显示文字时，one和two不会切换，为什么？怎么写才对？

来源：3-6 控制类名（className 属性）

赫塔缪勒_FreshFish

2019-08-22 11:06

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>changeClass</title>
        <style>
            .one
            {
                font-size:20px;
                color:#A0A;
                background-color:#FA0;
            }
            .two
            {
                font-size:50px;
                color:#000;
                background-color:#00F;
            }
            input
            {
                font-size:50px;
            }
        </style>
    </head>
    <body>
        <form>
            <input type="button" value="change_class_button" onclick="onChangeClass()"/>
        </form>
        <p id="testID" class="one">Javascript abc 汉字</p>
        <script>
            var some=document.getElementById("testID");
            document.write("元素p的class值为"+some.className);
            function onChangeClass()
            {
                if(some.className == "one")
                {
                    some.className="two";
                }
                else
                {
                    some.className="one";
                }
            }
        </script>
    </body>
</html>

连续点击按钮，p内文字style会切换，但最后显示文字时，one和two不会切换，为什么？怎么写才对？

写回答关注

3回答

天真无邪_2018

2019-08-22 16:25:10

已采纳

document.write("元素p的class值为"+some.className);
只是打印了第一遍，click的时候改变的只是style.

1 1

赫塔缪勒_F...

把document.write("元素p的class值为"+some.className); 这句写在function里面更奇怪，只会显示这句打印的字符串，p内文字都不知道哪去了。

2019-08-22 16:29:40

共 1 条回复 >
慕少9299533

2020-07-30 14:04:24

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>changeClass</title>
<style>
.one
{
font-size:20px;
color:#A0A;
background-color:#FA0;
}
.two
{
font-size:50px;
color:#000;
background-color:#00F;
}
input
{
font-size:50px;
}
</style>
</head>
<body>
<form>
<input type="button" value="change_class_button" onclick="onChangeClass()"/>
</form>
<p id="testID" class="one">Javascript abc 汉字</p>
<p>元素p的class值为<span id=ha1></span></p>
<script>
var some=document.getElementById("testID");
var ha1=document.getElementById("ha1")

function onChangeClass()
{
if(some.className == "one")
{
some.className="two";
ha1.innerHTML=some.className;

}
else
{
some.className="one";
ha1.innerHTML=some.className;

}
}
</script>

</body>
</html>
//这样更为符合！！！！

0 0
慕少9299533

2020-07-29 23:19:27

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>changeClass</title>
<style>
.one
{
font-size:20px;
color:#A0A;
background-color:#FA0;
}
.two
{
font-size:50px;
color:#000;
background-color:#00F;
}
input
{
font-size:50px;
}
</style>
</head>
<body>
<form>
<input type="button" value="change_class_button" onclick="onChangeClass()"/>
</form>
<p id="testID" class="one">Javascript abc 汉字</p>
<p id="ha1">元素p的class值为</p>
<script>
var some=document.getElementById("testID");
var ha2=document.getElementById("ha1")

function onChangeClass()
{
if(some.className == "one")
{
some.className="two";
ha2.innerHTML="元素p的class值为two"
}
else
{
some.className="one";
ha2.innerHTML="元素p的class值为one"
}
}
</script>
</body>
</html>

！！！！！！！！！！！！！！可以改成这样

0 0

JavaScript入门篇

JavaScript做为一名Web工程师的必备技术，本教程让您快速入门

739817 学习 · 9566 问题

查看课程

相似问题

怎么能点击按钮才填出文字啊

回答 3

点击按钮样式不断切换，下面的文字也会自动变，这是我花了十小时琢磨出来的

回答 6

点击按钮后，按钮会被document.write的内容所替换。如何不被替换，在其他地方显示？

回答 3

为什么点击按钮后的“p元素class值为：one"，点击后不是变成"two"了吗

回答 4

连续点击”添加样式“能让其样式在 .one和.two之间变换。

回答 2

打开慕课网App查看更多内容