Develop Reference

Getting the value from HTML into javascript

I'm not entirely certain if what I'm trying to do may be possible.
However,
<button class = "numbers" value=1>1</button>
all the way to
<button class = "numbers" value=9>9</button>
For example, I have 1 all the way to 9, when one of these buttons were to be clicked, I want the values to be console logged. So, if I clicked the number 1 for example, it would just console log 1 as an int using the value of that specific button, without having to specify each button individually.
Thank you for helping in advance!

Use event delegation. Add one event listener to the container of the buttons, and on click, if the target (the innermost clicked element) was a button that matches .numbers, log the value.
document.querySelector('.container').addEventListener('click', ({ target }) => {
if (!target.matches('.numbers')) return;
console.log(target.value);
});
<div class="container">
<button class = "numbers" value=1>1</button>
<button class = "numbers" value=9>9</button>
</div>

Is there a way to know whether or not something is added to localStorage?

I want to have a button that toggles something in and out of localStorage (it's clicked once and it adds something to localStorage, it's clicked again and that something disappears from localStorage). I want to do something like the code below, but toggling "status" instead of setting it permanently.

Okay. I don't know I got you or not. Here is a solution..
First I'm taking a button :
<button>Toggle</button>
Then using some scripts to toggle (add, remove) the item inside of localsotrage.
<script>
const button = document.querySelector("button");
button.addEventListener("click", function(){
const item = localStorage.getItem('info');
if (!item){
localStorage.setItem('info', 'Hello World')
}else{
localStorage.removeItem('info')
}
})
</script>
inside of this script simple method has been implemented. At first I'm taking a value from localstorage. Inside of if/else condition when item value if falsy it will add item into localstorage. When it is truthy it will remove from localStorage.

Capturing the value of a button

Get the value of a button and print it to the console.
I currently have a number of buttons (html) all have the same ID but different values.
when a button is clicked I want to print its value to the console.
document.getElementById("calcButtonID").addEventListener("click", btnPress);
function btnPress() {
var x = document.getElementById("calcButtonID").value
console.log(x);
}
It always displays the value of the first button ("1") regardless of the button I click,
What am i doing wrong? I think i need to pass the event listener to the function so it knows what button was clicked and not just the first ID it comes across
Thanks for the help (im getting there :) )

As pointed in the comments to the question, you may use e.target.value, or add data-attributes to your buttons, but since you asked about what you're doing wrong, I'll answer that particular question for you to avoid such problems in future.
Basically, an ID must be unique on page, proof here. So your main error is that several buttons have the same ID. What they can share though, is the name attribute, if for some reason you need them to be processed as a single element.
However, in this latest case, I would recommend using <input type="radio">, i.e., a group of radio buttons with the same name, but again, with different unique IDs.

You cannot have more than one element with id="calcButtonID" (or any other given id value). id must be unique at all times.
Instead of id, use the class attribute. Here's an example:
// get a NodeList of the buttons
const buttons = document.querySelectorAll('.report-value');
// turn the NodeList into an Array so we can use array methods on the list
const buttonsArray = Array.from(buttons);
// now iterate over the button list...
buttonsArray.forEach(function(button) {
// ... so we can give each button a click listener
button.addEventListener('click', function(event) {
// inside the event listener function, `this` points to the button that was clicked
console.log(this.value);
// alternatively, you can get the clicked button from the event object that is implicitly passed as event.target
console.log(event.target.value);
});
})
<input type=button value=foo class="report-value" />
<input type=button value=bar class="report-value" />
<input type=button value=baz class="report-value" />

An id is a unique identifier for only one html element. If you wnat to find several element, use class. Here is an example.
var buttons = document.getElementsByClassName("calcButton")
for(var i = 0; i<buttons.length; i++){
buttons[i].addEventListener("click", btnPress)
}
function btnPress(ev) {
console.log(ev.target.value);
}
<!-- begin snippet: js hide: false console: true babel: false -->
<button class="calcButton" value="1">1</button>
<button class="calcButton" value="2">2</button>
<button class="calcButton" value="3">3</button>
<button class="calcButton" value="4">4</button>
But as specified, it's better to use the onclick attribute rather than find the element by its classname

Check for one more condition with this code javascript

This is my code
//Remove disabled class from the next step button
var element = document.getElementById('stepbirth');
element.classList.toggle("disabled", parseJson.some(function (resp) {
return !resp.code;
}));
Which is working fine, it check the response from the php script on each element and toggle the disabled class from the button.
My question is this, How can i check one or more condition with this code..
Like i also have input type radio in the same form, how can i combine this together to check while input radio is checked on each class and response code is 1 then remove disabled class else do not remove disabled class.
I hope you understand guys my question.
Thanks in advance.

One way to do this would be to return true or false by checking if all the conditions are met. Something like this:
//Remove disabled class from the next step button
var element = document.getElementById('stepbirth');
element.classList.toggle("disabled", parseJson.some(function (resp) {
return (resp.firstcondition && resp.secondcondition && resp.thirdcondition);
}));

Getting value from mdl radio button

In the following code why doesn't the radio report the correct value when checked via its variable name?
var $myRadio = $('input[type=radio][name=options]:checked');
$('#button').click(() => {
// this works
console.log($('input[type=radio][name=options]:checked').val());
// this doesn't :(
console.log($myRadio.val());
});
https://jsfiddle.net/charsi/p4beztwx/13/
I am using mdl radio buttons so that could be causing it. I have also tried getting the value with $myRadio[0].MaterialRadio.value but that doesn't work either.
EDIT: This was a poorly worded question and didn't really have anythng to do with mdl. What I really wanted was the ability to set the DOM variable for my radio button somewhere else without having to select it by name again to check the value.

The reason for getting incorrect values when checked via its variable name is because you are setting $myRadio before the click event. $myRadio is set on document ready (before click event) and it gets the value of the checked radio option which at this moment is always 1.
Moving $myRadio inside a click handler should work. Why? Because now it gets the value of the radio (checked) as soon as the click function is called which is actually what you need.
$('#button').click(() => {
var $myRadio = $('[id^="option"]:checked');
// neither of these work
alert($('input[type=radio][name=options]:checked').val());
alert($myRadio.val());
});
fiddle here

For anyone else running into the same issue. Not wanting to call the radio button name when checking for its value, you can use filter -
var $myRadio = $('input[type=radio][name=options]');
$('#button').click(() => {
console.log($myRadio.filter(':checked').val());
}