CODEWITHSUNDEEP
javascriptjqueryjquery-selectorsselectormarkup
Kuzma
Kuzma

Reputation: 711

Can't add attributes to element with jQuery

I've CMS, which renders a markup in such a way where I can't add any additional id, class or events to elements.

In such a way I have to add them programmatically. The task is simple:

1). Find element by class name and add to its successor,(img) id name

2). add onClick attribute to it

3). execute script onClick (should swap the image and href's name (max 3 images))

JSFiddle

Here is a piece of markup:

<div class="single-image text-center to_change_inner">
   <div class="content">
      <div class="single-image-container">
      <img class="img-responsive" src="https://picsum.photos/200/300">
      </div>
   </div>
</div>

<div>
    <a id="btn-1559300726188">Click</a>
</div>

And here is a JQuery:

jQuery(function($) {
    element1 = $('.to_change_inner').children('img'); //find() also doesn't work
    element1.id="imgClickAndChange";
    if (element1.addEventListener) { 
      element1.addEventListener("click", changeImage, false);
    } else {
      if (element1.attachEvent) {  
        element1.attachEvent("click", changeImage);
      }
    }
 });    

 function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "https://picsum.photos/200/300") 
    {
        document.getElementById("imgClickAndChange").src = "https://picsum.photos/20/30";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "https://picsum.photos/200/300";
    }
}

window.addEventListener('load', function(){
    document.getElementById('btn-1559300726188').setAttribute("onclick", "imgClickAndChange(); return true;");
});

Upvotes: 1

Views: 2398

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074335

jQuery objects are not DOM elements, they're sets of DOM elements.

  • To set an attribute on all elements in the set, use attr: element1.attr("id", "imgClickAndChange")

  • To set a property, use prop: element1.prop("id", "imgClickAndChange") (id happens to be the property reflecting the id attribute; src is also both an attribute and a reflected property).

  • To add an event handler, use on: element1.on("click", changeImage).

In general, setter methods in jQuery set them on all elements in the set, and getter methods get from the first element in the set (but there are exceptions).

If for any reason you need to directly access the DOM element(s) in the set, you can do that with brackets notation like with an array.

More in the API docs and the learning center.

According to your HTML, you have an error here:

element1 = $('.to_change_inner').children('img'); //find() also doesn't work

The comment is incorrect, find would be what you want there, not children:

var element1 = $('.to_change_inner').children('img'); // Doesn't work
console.log(element1.length); // 0, no matching elements

var element1 = $('.to_change_inner').find('img'); // Works
console.log(element1.length); // 1, there was a matching element
<div class="single-image text-center to_change_inner">
   <div class="content">
      <div class="single-image-container">
      <img class="img-responsive" src="https://picsum.photos/200/300">
      </div>
   </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

That code also seems to be falling prey to what I call The Horror of Implicit Globals, you need to declare element1.

Upvotes: 4

Muhammad Bilal
Muhammad Bilal

Reputation: 56

Use this:

jQuery(function($) {
    element1 = $('.to_change_inner img');
    element1.attr('id',"imgClickAndChange");

    element1.on('click',function(){changeImage();})
 });    

 function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "https://picsum.photos/200/300") 
    {
        document.getElementById("imgClickAndChange").src = "https://picsum.photos/20/30";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "https://picsum.photos/200/300";
    }
}

window.addEventListener('load', function(){
    document.getElementById('btn-1559300726188').setAttribute("onclick", "imgClickAndChange(); return true;");
});

Upvotes: 1

Related Questions