CODEWITHSUNDEEP
javascripthtml
Dinohunter582
Dinohunter582

Reputation: 33

need help defining my variables in external js file

hi I'm doing a website for one of my class projects its nothing fancy but I can't get my variables to define and not sure how to as I'm relatively new to this I've been trying to use different ways to call the variables but they won't define and I'm not sure why I've been using brackets so any help would be greatly appreciated

/*variables used in index.html document*/
var square = document.getElementById("square")
var clickMe = document.getElementById('clickMe');

/*What the button is suppose to do*/
function doDemo() {  
    var button = this;
    square.style.backgroundColor = "#ff4545";
    button.setAttribute("diabled", "true");
    setTimeout(clearDemo, 2000, button);
}
/*removes the attributes when you click the button again*/
function clearDemo (button) {
    var square = document.getElementById("square");
    square.style.backgroundColor = "transparent";
    button.removeAttribute("diabled");
}

clickMe.onclick = doDemo;
/* color for webpage*/
html{
    background: silver;
    }
/* setting for heading 1 */
h1{
    color: saddlebrown;
    font-family: Helvetica, sans-serif;
    text-align: center;
    font-size: 55px;
}
/* settings for heading 2 */
h2{
    font-size: 30px;
    color: #D2691E;
    font-family: Helvetica, sans-serif;
}
/* settings for the introduction line */
.intro{
    text-align: center;
    padding-bottom: 1em;
    font-family: arial;
    margin: auto;
    max-width: 1100px;
    line-height: 2;
    font-size: 20px;
   
    
}
/* settings for images */
.shake {
   display:block;
margin-left: auto;
    margin-right: auto;
    width: 30%;
}
/* settings for body structure */
.prime{
    padding-bottom: 1em;
    font-family: arial;
    margin-right: auto;
    max-width: 900px
}

#square{
    width: 100px;
    height: 100px;
    border: 2px inset gray;
    margin-bottom: 1em;
}


button{
    padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
    <!--website title and attributes-->
<head>
    <title>Milkshakes</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="script.js"></script>
    </head>
<!-- make seprate class for each elment here-->
    <body>
        <h1>Milkshakes</h1>
        <!-- the div class for our images-->
        
        <div class="shake">
        <img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
            </div>
        
        <!-- our div class for the introduction line-->
        <div class="intro">
        <p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
        </div>
        
        <!-- div class for our body structure-->
         <div class="prime">
        <h2>What is a milkshake</h2>
        
       <!-- intro sentence-->
        <p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>
             
        <!-- start of body: section 1-->
        <h2>History of the milkshake</h2>
       
        
        <p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for 2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>
            
        <p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones you would find there are others but they werent as common.</p>
            
             <!-- new section begins: section 2-->
        <h2>The best flavor of milkshake</h2>
            
            <p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not tell you which is the best.</p>
            
             <!-- new section begins: section 3-->
            <h2>What is the perfect thickness</h2>
            
            <p>The 3 most common thicknesses you will hear about is thin,regular or thick. 
            </p>
            
            <!-- are list that we will make collapsable through java-->
            <ol>
            <li>thin its more of a liquid and light.</li>
            <li>regular its a nice consistency of light and thick.</li>    
            <li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
            </ol>
            
            <!-- sources for our milkshake stuff-->
            <h2>Sources</h2>
            <p>
                the art of drink:
                <a href="https://www.artofdrink.com/soda/history-of-the-milkshake">https://www.artofdrink.com/soda/history-of-the-milkshake</a></p>
        </div>
        
        <!-- our 2nd image-->
       <div class="shake">
        <img src="images/milkshake_image-2.jpg" width= "400px" alt="2nd image of a milkshake with different topings">
        </div>  
        
        <div id="square"></div>
        
        <button type="button" id="clickMe">Click Me</button>
        
        
        
    </body>
    

</html>

Upvotes: 3

Views: 56

Answers (3)

mplungjan
mplungjan

Reputation: 177684

It is recommended to use eventListeners and that will solve the issue

Also you need to make sure you spell things correctly - it is disabled

/*variables used in index.html document*/
let square; 
let clickMe;

/*What the button is suppose to do*/
function doDemo() {
  square.style.backgroundColor = "#ff4545";
  clickMe.setAttribute("disabled", "true");
  setTimeout(clearDemo, 2000);
}
/*removes the attributes when you click the button again*/
function clearDemo(button) {
  square.style.backgroundColor = "transparent";
  clickMe.removeAttribute("disabled");
}

window.addEventListener("load", function() {
  square = document.getElementById("square")
  clickMe = document.getElementById('clickMe');
  clickMe.addEventListener("click", doDemo);
});
/* color for webpage*/

html {
  background: silver;
}


/* setting for heading 1 */

h1 {
  color: saddlebrown;
  font-family: Helvetica, sans-serif;
  text-align: center;
  font-size: 55px;
}


/* settings for heading 2 */

h2 {
  font-size: 30px;
  color: #D2691E;
  font-family: Helvetica, sans-serif;
}


/* settings for the introduction line */

.intro {
  text-align: center;
  padding-bottom: 1em;
  font-family: arial;
  margin: auto;
  max-width: 1100px;
  line-height: 2;
  font-size: 20px;
}


/* settings for images */

.shake {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}


/* settings for body structure */

.prime {
  padding-bottom: 1em;
  font-family: arial;
  margin-right: auto;
  max-width: 900px
}

#square {
  width: 100px;
  height: 100px;
  border: 2px inset gray;
  margin-bottom: 1em;
}

button {
  padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
<!--website title and attributes-->

<head>
  <title>Milkshakes</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="main.css">
  <script type="text/javascript" src="script.js"></script>
</head>
<!-- make seprate class for each elment here-->

<body>
  <h1>Milkshakes</h1>
  <!-- the div class for our images-->

  <div class="shake">
    <img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
  </div>

  <!-- our div class for the introduction line-->
  <div class="intro">
    <p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
  </div>

  <!-- div class for our body structure-->
  <div class="prime">
    <h2>What is a milkshake</h2>

    <!-- intro sentence-->
    <p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>

    <!-- start of body: section 1-->
    <h2>History of the milkshake</h2>


    <p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for
      2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>

    <p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones
      you would find there are others but they werent as common.</p>

    <!-- new section begins: section 2-->
    <h2>The best flavor of milkshake</h2>

    <p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not
      tell you which is the best.</p>

    <!-- new section begins: section 3-->
    <h2>What is the perfect thickness</h2>

    <p>The 3 most common thicknesses you will hear about is thin,regular or thick.
    </p>

    <!-- are list that we will make collapsable through java-->
    <ol>
      <li>thin its more of a liquid and light.</li>
      <li>regular its a nice consistency of light and thick.</li>
      <li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
    </ol>

    <!-- sources for our milkshake stuff-->
    <h2>Sources</h2>
    <p>
      the art of drink:
      <a href="https://www.artofdrink.com/soda/history-of-the-milkshake">https://www.artofdrink.com/soda/history-of-the-milkshake</a></p>
  </div>

  <!-- our 2nd image-->
  <div class="shake">
    <img src="images/milkshake_image-2.jpg" width="400px" alt="2nd image of a milkshake with different topings">
  </div>

  <div id="square"></div>

  <button type="button" id="clickMe">Click Me</button>



</body>


</html>

Upvotes: 0

apena
apena

Reputation: 2321

The most effecient way in modern browsers is to use the defer attribute in your script tag the tag in the head so you could just change your single line of code in the head to:

<script defer type="text/javascript" src="script.js"></script>

Besically this is the best approach because parsing finishes just like when we put the script at the end of the body tag, but overall the script execution finishes well before, because the script has been downloaded in parallel with the HTML parsing. Using defer gives you the best of both worlds: asynchronous loading but it waits until the DOM is ready.

There is a very good article explaining the effeciency of each javascript loading technique in detail. here.

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65808

You are trying to locate and reference your HTML elements before they've been parsed in to memory. Move your <script> reference to just before the closing body tag.

In the code below, I've manually inserted the code that you will be referencing, but as long as you keep the script tag where I have it below, you can remove the JavaScript and add the .js reference to the script.

/* color for webpage*/
html{
    background: silver;
    }
/* setting for heading 1 */
h1{
    color: saddlebrown;
    font-family: Helvetica, sans-serif;
    text-align: center;
    font-size: 55px;
}
/* settings for heading 2 */
h2{
    font-size: 30px;
    color: #D2691E;
    font-family: Helvetica, sans-serif;
}
/* settings for the introduction line */
.intro{
    text-align: center;
    padding-bottom: 1em;
    font-family: arial;
    margin: auto;
    max-width: 1100px;
    line-height: 2;
    font-size: 20px;
   
    
}
/* settings for images */
.shake {
   display:block;
margin-left: auto;
    margin-right: auto;
    width: 30%;
}
/* settings for body structure */
.prime{
    padding-bottom: 1em;
    font-family: arial;
    margin-right: auto;
    max-width: 900px
}

#square{
    width: 100px;
    height: 100px;
    border: 2px inset gray;
    margin-bottom: 1em;
}


button{
    padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
    <!--website title and attributes-->
<head>
    <title>Milkshakes</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    </head>
<!-- make seprate class for each elment here-->
    <body>
        <h1>Milkshakes</h1>
        <!-- the div class for our images-->
        
        <div class="shake">
        <img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
            </div>
        
        <!-- our div class for the introduction line-->
        <div class="intro">
        <p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
        </div>
        
        <!-- div class for our body structure-->
         <div class="prime">
        <h2>What is a milkshake</h2>
        
       <!-- intro sentence-->
        <p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>
             
        <!-- start of body: section 1-->
        <h2>History of the milkshake</h2>
       
        
        <p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for 2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>
            
        <p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones you would find there are others but they werent as common.</p>
            
             <!-- new section begins: section 2-->
        <h2>The best flavor of milkshake</h2>
            
            <p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not tell you which is the best.</p>
            
             <!-- new section begins: section 3-->
            <h2>What is the perfect thickness</h2>
            
            <p>The 3 most common thicknesses you will hear about is thin,regular or thick. 
            </p>
            
            <!-- are list that we will make collapsable through java-->
            <ol>
            <li>thin its more of a liquid and light.</li>
            <li>regular its a nice consistency of light and thick.</li>    
            <li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
            </ol>
            
            <!-- sources for our milkshake stuff-->
            <h2>Sources</h2>
            <p>
                the art of drink:
                <a href="https://www.artofdrink.com/soda/history-of-the-milkshake">https://www.artofdrink.com/soda/history-of-the-milkshake</a></p>
        </div>
        
        <!-- our 2nd image-->
       <div class="shake">
        <img src="images/milkshake_image-2.jpg" width= "400px" alt="2nd image of a milkshake with different topings">
        </div>  
        
        <div id="square"></div>
        
        <button type="button" id="clickMe">Click Me</button>
        
     <script>
/*variables used in index.html document*/
var square = document.getElementById("square")
var clickMe = document.getElementById('clickMe');

/*What the button is suppose to do*/
function doDemo() {  
    var button = this;
    square.style.backgroundColor = "#ff4545";
    button.setAttribute("diabled", "true");
    setTimeout(clearDemo, 2000, button);
}
/*removes the attributes when you click the button again*/
function clearDemo (button) {
    var square = document.getElementById("square");
    square.style.backgroundColor = "transparent";
    button.removeAttribute("diabled");
}

clickMe.onclick = doDemo;     
     </script>       
        
    </body>
    

</html>

Upvotes: 0

Related Questions