CODEWITHSUNDEEP
javascripthtml
Hareesh
Hareesh

Reputation: 1577

How to find the element with an attribute and change the attribute value in javascript?

function allowDrop(ev) {
    ev.preventDefault();
  }

  function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
  }

  function drop(ev) {
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
  }
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" />

After dropping the image how can i change the attribute value draggable="true" to draggable="false" by finding the available elements with attribute draggable="true" inside the function drop() ?

Upvotes: 1

Views: 1329

Answers (3)

liakoyras
liakoyras

Reputation: 1185

You can use

document.querySelectorAll('[draggable="true"]');

in order to find elements with a certain attribute.

Note that this works only for HTML attributes, for classes you shall use

document.querySelectorAll('.classname[draggable="true"]')

Upvotes: 1

mplungjan
mplungjan

Reputation: 177688

I would use querySelectorAll and setAttribute

document.querySelectorAll('[draggable="true"]').forEach(elem =>
  elem.setAttribute("draggable",false)
);

Older JS 

var elems = document.querySelectorAll('[draggable="true"]');
for (var i=0;i<elems.length;i++) {
  elems[i].setAttribute("draggable",false);
}

Using a class:

document.querySelectorAll('.someClass[draggable="true"]')

Upvotes: 1

ellipsis
ellipsis

Reputation: 12152

Use querySelectorAll to get all the elements having draggable set to true. using setAttribute set draggable to false

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
  ev.preventDefault();
  var elem = document.querySelector('.className');
  elem.querySelectorAll('[draggable="true"]').forEach(e => e.setAttribute('draggable', false))
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" />

Upvotes: 1

Related Questions