How to access an htmlObject properties using JSON?

[agate]

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!!

[agate]

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

[agate]

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

[agate]

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!

[camperextraordinaire]

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)
  });
});

[agate]

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

[agate]

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!

[agate]

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’.

[jennifer_msit]

This does not work for me.

[agate]

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

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