How to access an htmlObject properties using JSON?

JavaScript
#1

Hi all.
I’m in way over my head to my feeling, but I’m trying to access an htmlobject’s properties using JSON?

The htmlObject returns five of these, on the first one is checked:

<input type="radio" class="btn-check form-control" name="radioFeedback" id="radio1" checked>

I get the htmlObject using : let container = document.getElementsByClassName(.classname);

This gets returned by the above line:

HTMLCollection(5) [input#radio1.btn-check.form-control, input#radio2.btn-check.form-control, input#radio3.btn-check.form-control, input#radio4.btn-check.form-control, input#radio5.btn-check.form-control, radio1: input#radio1.btn-check.form-control, radioFeedback: input#radio1.btn-check.form-control, radio2: input#radio2.btn-check.form-control, radio3: input#radio3.btn-check.form-control, radio4: input#radio4.btn-check.form-control, radio5:

Now I want to be able to access the individual radio button id and whether it has been checked or not.
I would think JSON.stringify is needed as first step?

Actually I tried

JSON.stringify(container, ["id", "radioFeedback"]);

but it just returns the same code every time no matter which button is pressed : {"radioFeedback":{"id":"radio1"}}
Thanks!!

#2

Do you have a Codepen of your project code?

You are capturing a collection, so you would need to iterate through to see which one is selected.

#3

Ok thank you. How would I do that though? Do I need to use JSON.stringify first ? It just looks unusable the htmlobject as it’s returned.

Thanks

#4

Iterate through the HTML collection and console.log out each element, so you can see what you captured.

#5

I had tried that earlier actually with a forEach loop, and this was returned:

[object HTMLCollection]
interactive-rating.js:20 value: [
interactive-rating.js:20 value: o
interactive-rating.js:20 value: b
interactive-rating.js:20 value: j
interactive-rating.js:20 value: e
interactive-rating.js:20 value: c
interactive-rating.js:20 value: t
interactive-rating.js:20 value:   
 
etc.

I have tried this

function getString(obj){
		[...obj].forEach(function(value,index){
			return('value:',value);
		});
}
container = JSON.stringify(container,getString(container));

and it just returns

{"0":{},"1":{},"2":{},"3":{},"4":{}}
interactive-rating.js:20 value: {
interactive-rating.js:20 value: "
interactive-rating.js:20 value: 0
interactive-rating.js:20 value: "
interactive-rating.js:20 value: :
interactive-rating.js:20 value: {
interactive-rating.js:20 value: }
interactive-rating.js:20 value: ,
interactive-rating.js:20 value: "  etc
#6

Can you please post your full project code in a Codepen or something like it? I need to see the HTML structure along with the JS you are using.

#7

Off course, I will post the important sections

//index.html
<div class="btn-group col-12 mr-3" role="group" aria-label="How did we do?">
					    <div class="form-group col">
                             <input type="radio" class="btn-check form-control" name="radioFeedback" id="radio1"checked>
                             <label class="btn btn-secondary" for="radio1">1</label>
					    </div>
						<div class="form-group col">
                            <input type="radio" class="btn-check form-control" name="radioFeedback" id="radio2">
                            <label class="btn btn-secondary" for="radio2">2</label>
						</div>
						<div class="form-group col">
                            <input type="radio" class="btn-check form-control" name="radioFeedback" id="radio3">
                            <label class="btn btn-secondary" for="radio3">3</label>
						</div>
						<div class="form-group col">
						    <input type="radio" class="btn-check form-control" name="radioFeedback" id="radio4">
                            <label class="btn btn-secondary" for="radio4">4</label>
						</div>
						<div class="form-group col">
						    <input type="radio" class="btn-check form-control" name="radioFeedback" id="radio5">
                            <label class="btn btn-secondary" for="radio5">5</label>
						</div>
                    </div>
					<button id='vote-button' type="submit" class="btn btn-primary col-12">Submit</button>


function getString(obj){
		[...obj].forEach(function(value,index){
			return('value:',value);
		});
	}
function getClass(className){
		return document.getElementsByClassName(className);
	}
//'page' variable is returned by another function, but not relevant
window.addEventListener('click',function(){
		if(page === 'index.html'){
			let htmlArr = getClass('form-control');
			htmlArr = JSON.stringify(htmlArr,getString(htmlArr));
			sessionStorage.setItem("htmlArr", htmlArr);
		}
	});

I use sessionStorage.getItem(‘htmlArr’) for another page, and it returns: votesArr: {"0":{},"1":{},"2":{},"3":{},"4":{}}

Thanks!

#8

This should get you started.

document.getElementById('vote-button').addEventListener('click', () => {
  const radioButtonChecked = document.querySelector('input[name=radioFeedback]:checked');
  console.log(radioButtonChecked.id)
});

With the code above, you will get the radio button that is checked. The others will not be checked.

If you want to see the checked status of all the buttons, you can do:

document.getElementById('vote-button').addEventListener('click', () => {
  const radioButtons = document.querySelectorAll('input[name=radioFeedback]');
  radioButtons.forEach(button => {
    console.log(button.id, button.checked)
  });
});
1 Like
#9

To get an object with the radio button ids and a value of 0 or 1 for whether the button is checked, you could do:

document.getElementById('vote-button').addEventListener('click', () => {
  const radioButtons = [...document.querySelectorAll('input[name=radioFeedback]')];
  const votesObj = radioButtons.reduce((votes, button) => ({ ...votes, [button.id]: +button.checked}), {});
  console.log(votesObj);                                     
});

The above will produce:

{
    "radio1": 0,
    "radio2": 0,
    "radio3": 0,
    "radio4": 1,
    "radio5": 0
}
1 Like
#10

Thank you! I will get it to work now. Good thing as I’m going on family visits soon . Thanks again :slight_smile:

#11

I’m actually getting some errors now in github.
It works just fine on my laptop, I can select a button, click submit, and it will display the correct radio button number.
But on github I’m getting error messages?

Could this something in getPage() , the url is wrong or such?

https://github.com/cmb347827/interactive-rating.github.io

Thanks!

#12

Hi, I hope you can help. I think it’s a github issue, as my code works fine with no errors on my laptop ,just in github deployment it’s throwing this error (before any click/submit):

Error with Permissions-Policy header: Origin trial controlled feature not enabled: ‘interest-cohort’.

#13

This does not work for me.

#14

Do you have a link to the live project showing the error? You linked to the project code on GitHub.

EDIT: Never mind. I found the live url.

The only error I see when the page loads is:

interactive-rating.js:8 Uncaught TypeError: Cannot read properties of null (reading 'join')
    at getPage (interactive-rating.js:8:30)
    at interactive-rating.js:26:15

The error has to do with the way you are attempting to parse the url to get the page. The home page will load the index.html file by default but the url will not show it at the end, so pageArray will be null.

The interest-cohort is just a warning that you can ignore. It has to do with how GitHub hosted pages disable FloC.

#15

I also noticed you did not try to incorporate the code I wrote that would allow you to get the id of the the checked radio button. Instead, you wrote a ton of repeated code.

#16

I did yes, I’m a bit stressed atm as I’m going on a overseas trip soon, so wanted this done asap to avoid the stress .
It does work though , I’m still learning, I will experiment with your code as well when I get back :slight_smile:

I also mentioned your help in the readme.md file
Thanks!