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

JavaScript
1

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?

2

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?

3

Anyone knows this and can explain it to my brain?

4

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