CODEWITHSUNDEEP
javascripthtml
Elizabeth O
Elizabeth O

Reputation: 21

how do I make the HTML button refer to an action in an external javascript file?

I am extremly new to coding (week 1) please excuse any misuse of terms, I am still learning.

In my homework I have a button that when clicked needs to change the size of a box on the screen. I believe I have the javascript written correctly, but I don't know how to tell the button in the HTML file "when I click on the button, look to the javascript file for the action" what is the code for button action in HTML.

I am using VScode. 

<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
</head>
<body>
    <p>Press the buttons to change the box!</p>

   <div id="box" style="height:150px; width:150px; background- color:orange; margin:25px"></div>

    <button id="growBtn">Grow</button>
    <button id="blueBtn">Blue</button>
    <button id="fadeBtn">Fade</button>  
    <button id="resetBtn">Reset</button>

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

</body>
</html>

document.getElementById("growBtn").addEventListener("click", function(){document.getElementById("box").style.height="250px"});

document.getElementById("blueBtn").addEventListener("click", function(){document.getElementById("box").backgroundColor = blue });

document.getElementById("fadeBtn").addEventListener("click", function(){document.getElementById("box").backgroundColor= lightorange });

document.getElementById("resetBtn").addEventListener("click", function(){document.getElementById("box").style.height = "150px"})

when I click on the buttons in the HTML file, it should call the javascript file and perform the action (change size, color, etc).

Upvotes: 2

Views: 3429

Answers (7)

Zargold
Zargold

Reputation: 2092

So this is how the browser reads this HTML file:

It reads it top to down: <title>Jiggle Into JavaScript</title>

set the browser's title area to the text here.

<body>: in the body element of HTML document:

<p>Press the buttons to change the box!</p> place a paragraph with default browser styles for the paragraph with the desired textNode: Press the buttons to change the box!.

<div id="box" style="height:150px; width:150px; background- color:orange; margin:25px"></div>:

This will create a div which is an html element with default styling of display: block the thing is background- color probably failed because it should be: background-color.

<button id="growBtn">Grow</button>
<button id="blueBtn">Blue</button>
<button id="fadeBtn">Fade</button>
<button id="resetBtn">Reset</button>

<script type="text/javascript" src="javascript.js"></script> here this may have failed because it should be: src="/javascript.js". Not using the / there has caused many of the best developers lots of wondering. (It might not be required in your particular simple case but if you don't have it then HTML will reach for the javascript file at the given path you are on: so if you are on website.com/my-route and you don't have that / it will end up looking for a javascript file at website.com/my-route/javascript.js and usually the javascript file is always at: the top level (/javascript.js: in the same folder with the index.html file.

Once the script file is correctly loaded it will globally know to add the event listener on the elements specified by ID. Theoretically, if you clicked fast enough it would fail to have added those event listeners to the buttons, before your click but that's highly unlikely/impossible.

This is the corrected version for JS:

document.getElementById("growBtn").addEventListener("click", function() {
  document.getElementById("box").style.height = "250px"
});

document.getElementById("blueBtn").addEventListener("click", function() {
  document.getElementById("box").style.backgroundColor = 'blue' // notice style is added and quotes must be used on the name of the color (or hex code)
});

document.getElementById("fadeBtn").addEventListener("click", function() {
  // presumably: lightorange is not a variable unless defined not here
  // if it is defined then you can ignore, but otherwise needs quotes.
  // also if it is a variable use camelCase to define it preferably.
  document.getElementById("box").style.backgroundColor = 'lightorange'
});

document.getElementById("resetBtn").addEventListener("click", function() {
// Note how here you put the 150px correctly in quotes.
  document.getElementById("box").style.height = "150px"
})

Also, if you ever suspect there's an issue with JavaScript the Chrome/Firefox/Safari/[Insert-your-browser-here] usually has an Inspector tool accessible by right clicking on the window and doing inspect element. Next, go to the newly opened inspector window's console prompt. This will probably display things like lightorange is not defined which will point you in the right direction.

Upvotes: 0

iamdlm
iamdlm

Reputation: 1973

You're missing the style attribute:

document.getElementById("box").style.backgroundColor = "lightorange";

And you have a space between background-color in the div style attribute which is breaking the style:

style="height:150px; width:150px; background-color:orange; margin:25px"

Upvotes: 2

Gopinath Ramanathan
Gopinath Ramanathan

Reputation: 46

First of all, i appreciate your work. For your understanding below i given the same code with few corrections. Just copy this and compare with your code. And i recommend to start from syntax which you can understand easily. Good luck!

<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
</head>
<body>
    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px">sdsd</div>

    <button id="growBtn" onclick='growbtn()'>Grow</button>
    <button id="blueBtn" onclick='bluebtn()'>Blue</button>
    <button id="fadeBtn" onclick='fadeBtn()'>Fade</button>
    <button id="resetBtn" onclick='resetBtn()'>Reset</button>
</body>
</html>

<script type="text/javascript">
    function growbtn() {
        document.getElementById("box").style.height = "250px";
    }
    function bluebtn() {
        document.getElementById("box").style.backgroundColor = 'blue';
    }
    function fadeBtn() {
        document.getElementById("box").style.backgroundColor = 'lightblue';
    }
    function resetBtn() {
        document.getElementById("box").style.height = "150px";
    }
</script>

Upvotes: 0

Tori
Tori

Reputation: 65

<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
</head>

<script type="text/javascript">

  function growFunction(){
    document.getElementById('box').style.height = "250px";
  }

  function blueFunction(){
    document.getElementById("box").style.backgroundColor = 'blue';
  }

  function fadeFunction(){
    document.getElementById('box').style.backgroundColor = 'orange';
  }

  function resetFunction(){
    document.getElementById('box').style.height = "150px";
  }


</script>

<body>
    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:darkorange; margin:25px"><br></div>

    <button id="growBtn" onclick="growFunction()">Grow</button>
    <button id="blueBtn" onclick="blueFunction()">Blue</button>
    <button id="fadeBtn" onclick="fadeFunction()">Fade</button>  
    <button id="resetBtn" onclick="resetFunction()">Reset</button>

</body>
</html>

Upvotes: -1

Hasan &#220;nl&#252;
Hasan &#220;nl&#252;

Reputation: 1

Adding to the other answers you should delete the whitespace "background- color:orange" in your div's styling.

Upvotes: 0

Lukas
Lukas

Reputation: 106

The code looks fine to me. You don‘t have to tell html to look at the js file and perform the actions thats what the Eventlistener does.

you made one Mistake changing the colors. You have to use a string and you missed the .style

So write: 

document.getElementById("box").style.backgroundColor = "lightorange";

Upvotes: 0

Andres2142
Andres2142

Reputation: 2897

You can assign an onClick action inside your button tag and call a javascript function like this:

<button id="growBtn" onClick="myFunction()"></button>

JS code:

const myFunction = () => {
   document.getElementById("box").style.height = "250px";
}

Also, don't define the type in your script tag, just with src is fine. You need to point the path of your JS script in the src property like this:

<script src="/scripts/myScript.js"></script>

Upvotes: 0

Related Questions