Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

JavaScript Multiple Scripts = Multiple Problems?

Hey all,
First, thank you for the forum; I've asked only one question and got an answer much quicker than asking my local college professors..... So from my previous post it seems I have problems with more than (1) script on one page. Is that why I can't get the first and third JS to run. Any help is always appreciated! As I said, I can get the button to change between images, but the text color change and the array (That is supposed to be a list!) is not. So frustrating understanding one part of JS and not seeing what I'm doing wrong; I have had so obvious syntax errors in the past. Thank you for looking!
JavaScript:
<body>
<button id="Text_Output">Change Color</button>
<div>
<p id="Text_Output">Change Color</p>
</div>
<script>
document.getElementById("toWhite").onclick = function () {
document.getElementById("Text_Output").style.color = 'white';
}
</script>
<br>
<script>
function pictureChange()
{
document.getElementById("flower").src="flower.jpeg";
}
</script>
<img id="flower" src="flowerbud.jpg">
<p><input type="button" id="becomeflower" value="Become Flower, Bloom there it is!" onclick="pictureChange()"></p>
<br>
<h3> The Things I Associate With Spring </h3>
<br>
<p id="Spring_Things"></p>

<script>
const Spring_Things = ["Easter", "Flowers", "Smell of Freshly Cut Grass", "Birds", "Sunshine", "Camping"]
let fLen = Spring_Things.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++)  {
  text += "<li>" + Spring_Things[i} + "</li>";
}
text += "</ul>";

document.getElementById("Spring_Things").innerHTML = text;
</script>

<br>

</body>
 
Solution
D
The problem is not that you cannot use multiple script sections. In your other thread you just had some issues with variables being defined twice.

The problems here are much simpler. Press F12 and inspect the console output, this immediately reveals why your 1st and 3rd script sections are not working ! Do this whenever your JS does not work like you think it should.

I am not to keen on littering your HTML code with snippets of script code. It's much easier to understand and maintain when you organize your script in functions, put them all in the <head><script> ... </script></head> section, and call your functions from the appropriate event handlers as much as possible (in this case the onLoad event).
The problem is not that you cannot use multiple script sections. In your other thread you just had some issues with variables being defined twice.

The problems here are much simpler. Press F12 and inspect the console output, this immediately reveals why your 1st and 3rd script sections are not working ! Do this whenever your JS does not work like you think it should.

I am not to keen on littering your HTML code with snippets of script code. It's much easier to understand and maintain when you organize your script in functions, put them all in the <head><script> ... </script></head> section, and call your functions from the appropriate event handlers as much as possible (in this case the onLoad event).
 
Solution
The problem is not that you cannot use multiple script sections. In your other thread you just had some issues with variables being defined twice.

The problems here are much simpler. Press F12 and inspect the console output, this immediately reveals why your 1st and 3rd script sections are not working ! Do this whenever your JS does not work like you think it should.

I am not to keen on littering your HTML code with snippets of script code. It's much easier to understand and maintain when you organize your script in functions, put them all in the <head><script> ... </script></head> section, and call your functions from the appropriate event handlers as much as possible (in this case the onLoad event).
So confused by your F12 reference until I looked up the shortcut for the console output on Chrome (which I now realize is immensely useful); you have taught me to help myself, which is much more useful than a direct answer! Thank you for your time and help! 🙂
 

Buy us a coffee!

Buy me a coffee.
Back
Top Bottom