Apply id value in dom and set it to variable within js function

Question

I was wondering how I can do the following.

I would like to set a div containing a certain id with a specific attribute value. Then apply this id to a variable within a function, so that when I call the function it applies the id value.

<html>
<head></head>
<body>
<div id="1123123" value="idloader"> </div>
</body>
</html>

the string that is contained within the id should be set to variable within the function.

<script>

function setTheId() {
div.id.valueOf(id).hasAttribute([value="idloader"])
};

var XYZ = setTheId();

</script>

in conclusion the ( var XYZ = 1123123 ) as set within the DOM element id with attribute value="idloader" should equal to variable within function.

NOTE.. This is not the same as Find an element in DOM based on an attribute value since we are not trying to find an element within the DOM based on attribute but are setting the element with a specific string that can be stored to a variable within the script.

Are you trying to find an element with that `value="idloader"` property and retreive its `id`? If so, can you use a `classname` property instead of a `value` property? You could use `document.getElementsByClassName()` — wizebin, Jul 20 '17 at 17:07
@wizebin what good would that do? the element doesn't even have a class -_-a — JJJ, Jul 20 '17 at 17:10
Possible duplicate of [Find an element in DOM based on an attribute value](https://stackoverflow.com/questions/2694640/find-an-element-in-dom-based-on-an-attribute-value). Then [Javascript: setAttribute() v.s. element.attribute = value to set “name” attribute](https://stackoverflow.com/q/8426461/215552) except obviously with the id attribute. — Heretic Monkey, Jul 20 '17 at 17:43
@MikeMcCaughan these are not technically the same as we are not trying to find the element in the DOM but we are setting the element to a specific id then allowing the id value to become the variable within our function, which would let us specify the variable within the DOM to receive the id string. — Digggid, Jul 20 '17 at 18:06
You need to find the element in order to set its id... right? That's what all of the answers are showing you how to do, and are replicated in the first question I linked to. Setting the id is described in the second question's answers. Storing the id in a variable and returning that variable... If you need help with that, that's describe in the answers to [this question](https://stackoverflow.com/q/19674992/215552). — Heretic Monkey, Jul 20 '17 at 18:19
@MikeMcCaughan we are trying to find the element with the set value to give a variable the value of the id, but then it is storing it within the variable within our function. So both links do apply to be similar but the combination would make it different? I appreciated the references. — Digggid, Jul 20 '17 at 18:29

score 1 · Answer 1 · answered Jul 20 '17 at 17:08

Yes, it is possible but you don't need to go through all of that to get your desired result.

To get an element with whose attribute equals a specific value, you can use querySelector. Once you have obtained that element, get the id.

var XYZ = document.querySelector('[value="idloader"]').id;

score 1 · Answer 2 · answered Jul 20 '17 at 17:18

1

HTML don't admin attrivute value on element div.

The right solution is

let x = document.querySelector('[data-value="idloader"]').id
console.log(x)

<html>
<head></head>
<body>
<div id="1123123" data-value="idloader"> </div>
</body>
</html>

answered Jul 20 '17 at 17:18

Fabiano Taioli

5,270
1
35
49

Alexander · Accepted Answer · 2017-07-20T17:59:09.610

Use querySelectorAll to get all divs that has an id and whose value attribute is equal to "idloader".

var elems = document.querySelectorAll('div[id][value="idloader"]');
for (var i = 0; i < elems.length; i++) {
  console.log(elems[i].id);
}

<div id="1123123" value="idloader"> </div>
<div id="1123124" value="idloader"> </div>
<div id="1123125"> </div>
<div value="idloader"> </div>

If you want to get only first div that matches to specified CSS selector, use querySelector method:

var MyID = document.querySelector('div[id][value="idloader"]').id;
console.log(MyID);

<div id="1123123" value="idloader"> </div>
<div id="1123124" value="idloader"> </div>
<div id="1123125"> </div>
<div value="idloader"> </div>

Note the value attribute isn't valid for <div> element in accordance to HTML5 Specification. Use data-* Attributes instead.

This works well.. Thank you. I was also wondering if it is then possible to use the first code snipped then when adding a javascript variable with a php or liquid function would allow each Id to be called depending where it is on the page from top to bottom. I don't think it can happen so it would seem that I would need to run a new variable value every time. — Digggid, Jul 20 '17 at 18:36

Apply id value in dom and set it to variable within js function

3 Answers3