Access button value in JavaScript [duplicate] - javascript

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
I am trying to access the value of the buttons I have created in JavaScript but it keeps showing up as undefined.
const button = document.querySelectorAll("button").value;
console.log(button);
<div class="row">
<div class="col">
<button type="button" value="7">7</button>
</div>
<div class="col">
<button type="button" value="8">8</button>
</div>
<div class="col">
<button type="button" value="9">9</button>
</div>
</div>

querySelectorAll returns an array-like group of elements, so to get value from all you need to do something like:
document.querySelectorAll("button").forEach(button => button.value)
Or for a specific one: document.querySelectorAll("button")[key].value

Note sure if you can give a value to a button..have you tried instead with a input?

document.querySelectorAll("button") will get you an array of buttons.
To access the value you will need to use array notation:
const button = document.querySelectorAll("button");
console.log(button[0].value);
console.log(button[1].value);

const button = document.querySelector("button").value;
Seems to fix it, using querySelector rather than querySelectorAll
I'm guessing that it's because querySelectorAll returns a nodeList of the buttons and that list doesn't have the value property.

It looks like the issue that you are running into is that document.querySelectorAll returns a NodeList (kinda like an array of nodes, but with fewer helper methods attached), not the nodes themselves. If you want to access the values of the buttons, you'll need to specify the index of the node that you want:
const button = document.querySelectorAll("button").value;
console.log(button[0].value); // 7
console.log(button[1].value); // 8
console.log(button[2].value); // 9

Related

How do I have a function find two elements? [duplicate]

This question already has answers here:
Can you do an 'AND' on a jQuery selector to target multiple buttons?
(3 answers)
Closed 4 months ago.
I'm a beginner with JavaScript so I'm sure this will be an elementary question.
With this function below, I want it to find the two elements and add them to a header element. Right now, the only thing that is working is the element, the link with the rel:author tag. I'm sure this is probably a syntax thing.
(function($) {
$(document).ready(function() {
$(".single .single-post-module").each(function() {
$(this).find('a[rel="author"]', 'span[class="updated"]').clone().appendTo($(this).find('.post-header h1'));
// ^^^
});
});
})(jQuery)
Edit: I'm using Divi on wordpress and the site is in maintenance mode. That's why didn't show the HTML or give a link.
This could be done with pure Javscript querySelectorAll with an CSS selector that will find both elements.
To clone the element, use cloneNode(true) where the first parameter indicates to clone 'deep'
const header = document.querySelector('.post-header > h1');
const elements = document.querySelectorAll('.single, .single-post-module');
Array.from(elements).forEach(e => header.append(e.cloneNode(true)));
<div class='single'>
<a rel='author'>Link</a>
<span class='updated'>Span</span>
</div>
<div class='single-post-module'>
<a rel='author'>Link</a>
<span class='updated'>Span</span>
</div>
<div class='post-header'>
<h1></h1>
</div>

The error is saying : "list.appendChild is not a function" [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Why does document.getElementsByClassName return an array here? [duplicate]
(2 answers)
Closed 3 years ago.
function addList(value) {
const list = document.getElementsByClassName("list-div ")
var div = document.createElement("div");
div.classList.add("list-new");
div.innerHTML = `<div class="h5-div" >
<h5 class="list" >${value}</h5>
</div>
<div class="actions" >
<span class="action-span" ><button
class="action-btn">done</button></span>
<span class="action-span" ><button
class="action-btn">edit</button></span>
<span class="action-span" ><button
class="action-btn">delete</button></span>
</div>`;
list.appendChild(div);
}
Preferibly when you are attaching elements to a list with a function, the best option is provide an id instead of a class.
If you want to use the class, you have to use [0] since the "const list" is an array.
You can't append a child to an array, you need to provide the exact element.
Use list[0] since getElementsByClassName returns a HTMLCollection (array-like object):
list[0].appendChild(div);
getElementsByClassName returns a HTML Collection. You might need to use list[0] depending on what you wish to do.
list[0].appendChild(div);
Also, you can consider using document.getElementByID('uniqueId') if you wish to get one unique list in your dom. You need to create a list as:
<ul id="uniqueId">
</ul>

Can't change button innerHTML with JS [duplicate]

This question already has answers here:
How to use getElementsByClassName in javascript-function? [duplicate]
(3 answers)
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I can't find a way to change the string "FIND NOW" into something else.
I have tried for hours
<button type="submit" class="qbutton default" style="">FIND NOW</button>
I tried something like this:
<script>
document.getElementsbyClassName('.button.qbutton.default').innerHTML('change it!');
</script>
Could someone help please?
Use document.querySelector('button.qbutton.default') as querySelector() will allow you to select the particular element based on the selector and not list of elements. Also you need to use button as selector and not .button and make sure the script is after the body element to get the HTML rendered properly first.
document.querySelector('button.qbutton.default').innerHTML = 'change it!';
<button type="submit" class="qbutton default" style="">FIND NOW</button>

Understanding the usage of get() in my sorting script

I recently found a code snippet that I would really like to understand:
var buttons = $('#fruit,#vegetable,#meat').click(function() {
$(this).toggleClass('active');
var classes = buttons.filter('.active').map(function() {
return this.id;
}).get().join(',.');
$('div.fruit,div.vegetable,div.meat').hide().
filter('.' + (classes || 'none')).show();
});
The HTML code :
<div style="float:right; padding:25px;">
<button id="fruit" class="active"><span>fruit</span></button>
<button id="vegetable" class="active">vegetable</button>
<button id="meat" class="active">meat</button>
</div>
<div>
<p>Trying to use buttons as an "or" case rather than "and." When choosing fuit or vegetable, I want to see tomato as part of each list, <em>not just</em> when both are selected.</p>
<div class="fruit">
<p>apple</p>
</div>
<div class="vegetable">
<p>pumpkin</p>
</div>
<div class="vegetable">
<p>okra</p>
</div>
<div class="fruit">
<p>orange</p>
</div>
<div class="meat">
<p>beef</p>
</div>
<div class="fruit vegetable">
<p>tomato</p>
</div>
</div>
The fiddle is here.
I do understand how all the methods work in jQuery like toggleclass, filter and map, I also understand how join works in JS, but in this particular example, I am not able to figure out how get() is working or rather what is it's usage in the script is.
I went through the jQuery documentation for get() and I came across this method for the first time; to me, it seems it's very much similar to eq() in jQuery, but I am still not able to figure out why exactly get is being used in my example.
Can somebody explain this to me ?
.get is used here, because .map returns a jquery style object which contains some functions and information about the contained data. But in this scenario only the values stored within the object (the class names of the active buttons) are wanted. .get is used to get an array containing the raw values and with .join(",.") the values from the array get concatenated to a string. This string then get's used to show all div's that should be active according to the selected buttons.

Duplicate id of children of an element. is it good practise? [duplicate]

This question already has answers here:
Can multiple different HTML elements have the same ID if they're different elements?
(17 answers)
Closed 8 years ago.
I have so many children, in an element, So to avoid of maintaining multiple ids, I have used same ids
ex
<div id="1" class="userstatus">
<div class="floatl userdetails">
<span id="name" class="ellips">aravi</span>
</div>
<div id="scode" class="status status-1"></div>
</div>
<div id="2" class="userstatus">
<div class="floatl userdetails">
<span id="name" class="ellips">aravi</span>
</div>
<div id="scode" class="status status-1"></div>
</div>
Here I have duplicated name, scode ids for innerElements of 1, 2. I can able to
I can able to get the name by using querySelector api. am I doing right way?
You should never use duplicate ids - id should be unique per document.
If you need multiple elements with the same "tag" use classes.
I would recommend you read: http://css-tricks.com/the-difference-between-id-and-class/
Think of it like:
You have on your ID card an id number that is unique to you, no one else has it.
But you are part of the class of people who post Questions on SO, and obviously there are more of us.
By definition ID's should describe one element in the DOM uniquely. Also, semantics is compromisied by using multiple ID's.

Categories