从html获取值并使用javascript更新DOM

Question

I have a basic webpage (not connected to a server) which takes information in a form and displays this information on the same page. One of the input options is a checkbox and I am struggling to display these selected values on the page. I've been unable to decipher the other solutions I've come across. There's a lot of text below but it's pretty basic.

What do I need to display the results of the checkbox selections? Are the results of a checkbox input saved in an array?

Any assistance will be of great use.

 document.addEventListener('DOMContentLoaded', () => { const newItem = document.querySelector('#new-item'); newItem.addEventListener('submit', handleNewItemForm); }) const handleNewItemForm = function (event) { event.preventDefault(); const whiskyItem = createWhiskyListItem(event.target); const whiskyList = document.querySelector('#drunk-whiskies'); whiskyList.appendChild(whiskyItem); event.target.reset(); } const createWhiskyListItem = function (form) { const whiskyItem = document.createElement('li'); whiskyItem.classList.add('drunk-whiskies-item'); const name = document.createElement('h2'); name.textContent = form.name.value; whiskyItem.appendChild(name); const type = document.createElement('h3'); type.textContent = form.type.value; whiskyItem.appendChild(type); /**** This is the problem area. As above, I am looking to take the values from the form, make this into some text, before appending this to whiskyItem, which is then appended to whiskyList. */ return whiskyItem; } 

 <form id="new-item"> <div id="form-wrapper"> <div class="form-item"> <label for="name" class="primary">Name</label> <input type="text" id="name" required /> </div> <div class="form-item"> <label for="type" class="primary">Type</label> <input type="text" id="type" required /> </div> <div class="form-item"> <label for="flavour" class="primary">What did you taste?</label><br> <input type="checkbox" id="flavourProfile" value="boozy" name="boozy" checked> <label for="boozy">Booze</label> <input type="checkbox" id="flavourProfile" value="malty" name="malty"> <label for="malty">Malt</label> </div> </div> <input type="submit" value="save" /> </form> <h1>You've consumed...</h1> <div id="drunk-whiskies"></div> <ul></ul> 

Answer 1

You have Same ID's values for both checkboxes, which is incorrect. Change the ID's values to "flavourProfile1' and 'flavourProfile2' respectively. And try the following code. It will display the selected checkbox value in the <div id='drunk-whiskies'></div> .

    $("#flavourProfile1").click( function(){
   if( $(this).is(':checked') ) $("#drunk-whiskies").append('Booze');
    });

  $("#flavourProfile2").click( function(){
   if( $(this).is(':checked') ) $("#drunk-whiskies").append('Malt');
    });