HTML/JS中的2个独立脚本相互干扰
我正在学习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>
MMMHUHU3回答
-
心有法竹
您应该只有一个脚本，但您可以根据需要输入任意数量的函数。你可以有一个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> -
蛊毒传说
无论你想要实现什么，这都不是要遵循的好习惯。即使您正在学习从一开始就学习正确的做法。因此，需要进行一些更改只能有 1 个<正文>标签遵循正确的命名约定 - 方法名称应为动词，例如：、 、 等。changeFontColor()changeFontSize()分离 html 模板、样式和脚本 - 使用 css 而不是像 .没有内联css或内部javascript。将其保存在单独的文件中或单个单独的部分中。font代码应正确独立由于您是新手，因此我分享了一个用于设计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> -
宝慕林4294392
解决方案：如果您可以更改我的函数（）这会将颜色更改为myFunction1 或“myFunction”以外的任何内容在这两个地方（更改颜色的函数定义和调用它的地方，单击颜色更改），然后它将开始工作。原因：正如Keith在评论中所说，在全局范围内，我们将具有唯一的函数名称，否则，定义的最后一个函数名称优先。
随时随地看视频慕课网APP
相关分类
JavaScript