Add Attribute to existing div Tag via Javascript

Question

I'm working on a WordPress website.

All I want to do, add the attribute onclick="off() to an existing div class via javascript (so that the div always has this attribute when the site is loaded). the content plugin I use creates div's automatically, so instead of editing the source code each time, this seems like a nice and fast solution.

right now I'm trying this, but it doesn't work (i know almost nothing about js):

function myfunction() {
    document.getElementById("#content_al").setAttribute("onclick","off")
}

I read many threads but didn't get it to work, can anyone help me :)?

void · Accepted Answer · 2018-03-05 09:30:35Z

2

off in setAttribute should be off()
Do not pass # in document.getElementById("#content_al"), instead pass plain id i.e. content_al

function myfunction() {
  document.getElementById("content_al").setAttribute("onclick", "off()")
}

function off() {
  console.log("clicked on off!");
}

myfunction();

<div id="content_al"> Some Content </div>

answered Mar 5, 2018 at 9:30

void

36.7k10 gold badges71 silver badges111 bronze badges

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

1 Comment

yisharu Over a year ago

it didn't work for me :( maybe there's something in general wrong with my code? <script> function myfunction() { document.getElementById("content_al").addEventListener("click",off) } function on() { document.getElementById("content_al").style.display = "block"; } function off() { document.getElementById("content_al").style.display = "none"; } </script>

Ali_Hr · Accepted Answer · 2018-03-05 10:05:27Z

1

try jquery. it's easy

jQuery("#content_al").click(function(){
    //do action
});

this code defines a click event for your element and you can write your action to run after event fired.

answered Mar 5, 2018 at 10:05

Ali_Hr

4,7253 gold badges30 silver badges35 bronze badges

Comments

Manish · Accepted Answer · 2018-03-05 10:14:29Z

0

For adding an event handler you should use addEventListener. Below is how you can do it with vanilla javascript.

function myfunction() {
    document.getElementById("content_al").addEventListener("click",off)
}

where off is a function Below is a working snippet. Hope this helps :)

function toggleDisplay() {
  let display = document.getElementById("content_al").style.display;

  document.getElementById("content_al").style.display = display == "none" ? "block" : "none";
}

function myfunction() {
  document.getElementById("hide").addEventListener("click", toggleDisplay);
}
myfunction();

<div id="content_al"> Some Content </div>

<button id="hide">Hide/Show</button>

edited Mar 5, 2018 at 10:14

answered Mar 5, 2018 at 9:29

Manish

5,0963 gold badges33 silver badges47 bronze badges

8 Comments

yisharu Over a year ago

didn't work :( maybe something wrong with my code? <script> function myfunction() { document.getElementById("content_al").addEventListener("click",off) } function on() { document.getElementById("content_al").style.display = "block"; } function off() { document.getElementById("content_al").style.display = "none"; } </script>

Manish Over a year ago

Please have a look. Have added a working snippet with a few modifications just to demonstrate how it works.

yisharu Over a year ago

still didn't work, think i'm doing something wrong. but i want it to be only one button btw. which hides or shows it. can you maybe help me via team viewer or something else?

Manish Over a year ago

@yisharu have updated the code to use one button and have also renamed the function. Its up to you if you want to have two different function or not. I have used just one. If you want to have 2 you will have to call them based on condition

yisharu Over a year ago

thank you! i want the content to be a full screen overlay. i got that part working with css. tho now, the button is "not visible" and i would love to have a method to click "anywhere on screen" to close the full screen overlay, you know what i mean? can you maybe help me w/ that pls too :)?

|

Collectives™ on Stack Overflow

Add Attribute to existing div Tag via Javascript

3 Answers 3

1 Comment

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related