Question

我正在学习HTML / JS，但在使用此脚本时遇到了麻烦。我正在练习制作执行动作的按钮，但是当我到达点击文本的那一部分时，就进行了诸如更改innerHTML的动作。我曾尝试将脚本移动到页面上的其他位置，但是无论何时我按下更改文本的元素都会使其他脚本执行操作，但我单击的脚本却不起作用，因此没有运气。我指的是我何时使用

<h1>Click to change text color</h1>

    <p id="siaz" onclick="myFuntion()">Click me to make my text change color!</p>

    <script>

        function myFuntion() {

            document.getElementById("siaz").style.color='red';
        }

        </script>

    </body>

两个myFuntion（）脚本都给我带来麻烦。请帮忙。通过将其加载到编辑器中，自己查看问题。

<!DOCTYPE>
<html>

<center><font face = "Canela" fontSize = "35px" style = "color: darkblue"><h1>Just practice</h1></font></center>

    <body>

        <font face = "Didot"><h1>Change text</h1></font>

    <p id="mill">This text will change</p>

        <button type = "button" onclick = 'document.getElementById("mill").innerHTML="Changed!"'>Click to change!</button>

    </body>

    <body>

    <font face = "Papyrus" ><h1>This will make text reappear</h1></font>

        <p id="disa" style = "display:none">This text will be reappear</p>

        <button type = "button" onclick = "document.getElementById('disa').style.display='block'">Click to reappear</button>

    </body>

    <body>

        <font face = "Verdana"><h1>This will make text disappear</h1></font>

    <p id="deps">This text will go away when you click that button</p>

        <button type = "button" onclick = "document.getElementById('deps').style.display='none'">Click to make this text go away!</button>

    </body>

    <body>

    <h1>This will Change the font size</h1>

        <p id="clas">This should become bigger</p>

        <button type = "button" onclick = "document.getElementById('clas').style.fontSize='45px'">Click to make the size bigger</button>

    </body>

    <body>

        <h1>Click to change text color</h1>

    <p id="siaz" onclick="myFuntion()">Click me to make my text change color!</p>

    <script>

        function myFuntion() {

            document.getElementById("siaz").style.color='red';
        }

        </script>

    </body>

        <body>

<h1>Clicking the text will change the text</h1> 

        <p id="home" onclick = "myFuntion()">Click me, I dare you</p>

        <script>

        function myFuntion() {

            document.getElementById('home').innerHTML="Go away"
        }

        </script>

    </body>

</html>

Answer 1

您应该只有一个脚本，但是您可以根据需要放置任意数量的函数。您可以具有changeColor函数，changeFont函数（可以随便命名，但可以随便命名，以方便阅读）。

 <p id="siaz" onclick="changeColor()">Click me to make my text change color!</p>
 <p id="home" onclick="changeText()">Click me, I dare you</p>

 <script>

    function changeColor() {

        document.getElementById("siaz").style.color='red';
    }

    function changeText() {

        document.getElementById('home').innerHTML="Go away";
    }

</script>

Answer 2

无论您要实现什么目标，都不是遵循的好习惯。

即使您正在学习

从一开始就学习正确的做法。因此，需要进行一些更改

只能有1个<body>标签
遵循正确的命名约定-方法名称应为动词，例如：changeFontColor()，changeFontSize()等
单独的html模板，样式和脚本-使用CSS代替font之类的元素。没有内联CSS或内部javascript。将其保存在单独的文件或单独的单独部分中。
代码应正确删除

由于您是新手，所以我共享了一个模板，用于设计html页面，您可以从此处开始参考

<!DOCTYPE>
<html>
    <head>
        <style>
            <!-- All css styles goes here -->
        </style>
    </head>
    <body>
        <!-- All html code goes here -->
        <script>
            <!--All scripts goes here -->
        </script>
    </body>
</html>

Answer 3

解决方案：如果您只需更改

myFunction（）

将颜色更改为

myFunction1或“ myFunction”以外的任何内容

在两个地方（更改颜色的函数定义和调用颜色的地方，即单击颜色的onclick）都将开始工作。

原因：正如Keith在评论中所说，在全局范围内，我们将拥有唯一的函数名，否则，最后定义的函数名优先。

最好，提交

HTML / JS中的2个单独的脚本相互干扰

3 个答案: