Why the code only shoots alone in my Js-file?

Hi

So below I will submit some html and then some javascript. When I have only the function to create the alert, in the html-file, the code shoots. But why does everything disappear and stuff when I submit a function below(or above) this code?

How do other people make all their Javascript come into only one file and still make everything shoot?

Here is html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stylesheet.css">
    <title>Huskybreeder</title>

<script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
</script>

</head>
<body onload="myFunction()">

    <div id="header"></div>


    <div class="background-image">
        <div class="image-text">
          <h1>I am a Husky breeder</h1>
          <h2>Our Dogs are Sled dogs</h2>
          <button class="button" input type="button">Hire me</button>
        </div>
      </div>


      <audio id="myAudio2">
        <source src="audio/Huskies barking.wav" type="audio/mpeg">
        </audio>
   
        
        <script src="Javascript.js"></script>
      <div id="footer"></div>
      
      <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
      
</body>
</html>

Here is js-file:

$(function(){
    $("#header").load("header.html"); 
    $("#footer").load("footer.html"); 
    $("#form").load("form.html"); 
  });





  
     

 


  /*Here begins function to get Wolfman up on about-page
    
       function wolfmanFunc(){
          document.getElementById('wolfman').style.visibility="visible";
      }
    
       document.getElementsByClassName("about-button")[0].onclick=function(){
          wolfmanFunc();
       }
    
       function wolfmanFunc2(){
          document.getElementById('wolfman').style.visibility="hidden";
      }
    
       document.getElementsByClassName("about-button2")[0].onclick=function(){
          wolfmanFunc2();
       }

       /*Here ends function to get Wolfman up on about-page


       /*Here begins third wolfman*/


       /*Here begins function to get Wolfman2 up on about-page

  document.querySelector("#toggle-wolfman2").addEventListener('click', e => {
   document.querySelector("#wolfman2").classList.toggle("hidden");
 });

Here ends function to get Wolfman2 up on about-page*/

   

      document.getElementById("myAudio2");
      function myFunction() {
  x.play();
  }

  function myFunc(){
      alert("You can either contact me or hire me through the links in this website below");
        }
      
        document.getElementsByClassName("button")[0].onclick=function(){
          myFunc();
        }

        
    
     
   


      


          


          

Notice all the functions in the js-file that are inactivated within these brackets: /* */

For example if I remove those brackets on this one and make it shoot, nothing works at all:

  /*Here begins third wolfman*/


       /*Here begins function to get Wolfman2 up on about-page

  document.querySelector("#toggle-wolfman2").addEventListener('click', e => {
   document.querySelector("#wolfman2").classList.toggle("hidden");
 });

Here ends function to get Wolfman2 up on about-page*/

How should I stack up js-functions to make them all work? Is it only possible to make one function shoot in the js-file? Or how can I make several work from different html-files? Do I have to create a new script for every function? Or am I just stacking them in the wrong order or something?

I also wonder how I can stylize my alert-box below (with css?) ?

 function myFunc(){
      alert("You can either contact me or hire me through the links in this website below");
        }
      
        document.getElementsByClassName("button")[0].onclick=function(){
          myFunc();
        }

Or are there other better alternatives to make something like that look different?

Anyone knows this and can explain it to my brain?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.