Adding javascript functions to web page

Question

I've been messing around with making some simple chrome extensions, and everything was going smooth, editing html on a web page with some javascript is pretty straight forward. Now the problem starts when i want to add some javascript functions, for example to toggle a certain div etc. Here is my code

{
"name":"Warmane",
"description":"Some modifications to warmane forum.",
"version":"1.2",
"manifest_version":2,

"content_scripts": [
    {
      "matches": ["http://forum.warmane.com/*"],
      "js": ["myscript.js"]

    }
  ]
}

content script

//Creating Elements

//Adding lates post button  
var nodeLi = document.createElement("LI");  
nodeLi.setAttribute("id", "latest_news");
var nodeA = document.createElement("A");               
var content = document.createTextNode("Latest posts");         
nodeA.appendChild(content);  
nodeA.setAttribute("class", "navtab");   
nodeA.setAttribute("href", "http://forum.warmane.com/search.php?do=getnew");    

//Adding mod cp button  
var nodeLiTwo = document.createElement("LI");  
nodeLiTwo.setAttribute("id", "mod_cp");
var nodeATwo = document.createElement("A");               
var contentTwo = document.createTextNode("Mod Cp");         
nodeATwo.appendChild(contentTwo);  
nodeATwo.setAttribute("class", "navtab");   
nodeATwo.setAttribute("href", "http://forum.warmane.com/modcp/"); 
//latest posts               
document.getElementById("navtabs").appendChild(nodeLi);     
document.getElementById("latest_news").appendChild(nodeA); 
//mod cp
document.getElementById("navtabs").appendChild(nodeLiTwo);     
document.getElementById("mod_cp").appendChild(nodeATwo);  

//Editing style 
document.getElementById("page-frame").setAttribute("style", "display: none");
document.getElementsByClassName("above_body")[0].setAttribute("style", "top: 170px");
document.getElementsByClassName("navigation-wrapper")[0].setAttribute("style", "top: 90px");

Now on this web page i want to edit i have a div

<p class="toggle">Toggle</p>
<div id="someDiv"></div>

which i want to show/hide every time i click on that <p>, and i have no idea how can i do that. Can anyone explain to me how can i go about this?

You need to register an event listener on the element you are creating that triggers the hiding/showing. developer.mozilla.org/en-US/docs/Web/API/EventTarget/… — Luke
– Luke, Commented May 19, 2015 at 19:16
Yeah i was talking about event listener, zfrisch solution worked perfectly! — Chilipepper
– Chilipepper, Commented May 19, 2015 at 19:38

zfrisch · Accepted Answer · 2015-05-19 19:18:24Z

1

Here's a fiddle: http://jsfiddle.net/4qqxr1dx/

document.getElementsByClassName("toggle")[0].addEventListener("click",    function() { 
var displayed = document.getElementById("someDiv").style.display;
(displayed == "none") ? document.getElementById("someDiv").style.display = "inline" : 
document.getElementById("someDiv").style.display = "none";

});

I added an event listener to the first DOM element with class "toggle". When you click on it it checks the display property of the element with the id "someDiv"

It throws it into a ternary operation(more info here -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)

The operation determines if it's displayed and then either hides or shows depending on the current declaration of the "display" property.

answered May 19, 2015 at 19:18

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zfrisch Over a year ago

@Chilipepper Absolutely no problem! Good luck!

Chilipepper Over a year ago

One more question:) I would like to save the user input, so for example if someone hides the div and when he reloads the page, div should stay hidden. My idea would be to save the input to local storage and then show or hide the div depending on that. What do you think?

zfrisch Over a year ago

@Chilipepper haha, sure. You've got the right frame of mind. I would personally use sessionStorage which only saves the variable until the browser is closed, but in the end that's up to you. Here's an example of the difference: html5demos.com/storage - here's a tutorial: w3schools.com/Html/html5_webstorage.asp

Collectives™ on Stack Overflow

Adding javascript functions to web page

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related