You should have only one script, but you can put in as many functions as you want. You can have a changeColor function, a changeFont function (you can name then whatever you want but should have an appropriate description so it’s easier to read it).
<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>
Solution 2 :
Irrespective of what you are trying to achieve, that’s not the good practice to follow.
Even if you are learning
Learn the right practices at the start itself. So, a few changes needed
There can only be 1 <body> tag
Follow proper naming conventions – Method name should be a verb e.g.: changeFontColor(), changeFontSize(), etc.
Seperate html templates, styling and scripts – Use css instead of elemtents like font. No inline css or internal javascript. Keep it in separate file or in a single separate section.
Code should be properly indeneted
As you are new to this, I have shared a template for designing html pages which you could refer to start with
<!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>
Solution 3 :
Solution: If you could just change the
myFunction()
which changes the color to
myFunction1 or anything other than “myFunction”
at both the places (the function definition where you change the color and at the place where you are calling it, the onclick for color change) then it will start working.
Reason: As Keith said in the comments, in the global scope, we shall have unique function names, otherwise, the last one defined takes the precedence.
Best,
Sumit
Problem :
I am learning HTML/JS and I am having trouble with this script. I am practicing making buttons that preform actions but when I got to the the part of where clicking text doing actions like changing innerHTML. I have tried moving the script to a different location on the page but with no luck anytime I press the element that changes text it makes the other script do the action but not the one I clicked. I am referring to when I use
<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>
I am only having trouble with both myFuntion() scripts. Please help. See issue for yourself by loading it in an editor.
<!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>
Comments
Comment posted by vsync
unfortunately Stackoverflow is not the platform for such questions, but probably Reddit is
Comment posted by Keith
You can only have 1 global functions called
Comment posted by developer.mozilla.org/en-US/docs/Glossary/Scope
Hey both function lives in the same scope so your second function just overrides the first one. You should read about scoping in programming languages. In your case both are in the top-level window scope.
