Favourite Place Javascript web application-CodePudding

In this Favourite place Dynamic Web Application achieving the design with HTML, CSS, and functionality with JS. I had not getting to do the functionality with JS, I'm facing problem as

When the Submit button is clicked

Text content in the HTML paragraph element should contain the value of the checked HTML radio input element.

Below is the image of expected output:-

Favourite Place output image:

Note :- The HTML radio input element with value Agra, should have checked atrribute by default.

You can use HTML form element.

Here is the code I tried

let questionsFormElement = document.getElementById("questionsForm");
let inputElement = document.getElementById("favouritePlace");
let input1Element = document.getElementById("favouritePlace1");
let input2Element = document.getElementById("favouritePlace2");
let label1Element = document.getElementById("label1");
let label2Element = document.getElementById("label2");
let label3Element = document.getElementById("label3");
let submitBtnElement = document.getElementById("submitBtn");
let textParagraphElement = document.getElementById("textParagraph");


submitBtnElement.addEventListener("click", function(){
    inputElement.textContent = "Your favourite place is:"   label1Element.textContent;
});

@import url("https://fonts.googleapis.com/css2?family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&family=Playfair Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap");

.heading {
    font-family: "Roboto";
    font-size: 30px;
}

.label-element {
    font-family: "Roboto";
    font-size: 14px;
}

.button {
    height: 30px;
    width: 65px;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 10px;
    color: white;
    background-color: #327fa8;
}

<!DOCTYPE html>
<html>

<head> </head>

<body>
    <h1 class="heading">Select Your Favourite Place</h1>
    <form id="questionsForm" class="p-4 questions-form">
    <input type="radio" id="favouritePlace" value="Lucknow" name="Lucknow"  />
    <label for="favouritePlace" id="label1" class="label-element">Lucknow</label>
    <br/>
    <input type="radio" id="favouritePlace1" value="Agra" name="Agra" checked />
    <label for="favouritePlace1" id="label2" class="label-element">Agra</label>
    <br/>
    <input type="radio" id="favouritePlace2" value="Varanasi" name="Varanasi" />
    <label for="favouritePlace1" id="label3" class="label-element">Varanasi</label>
    <br/>
    <button class="button" id="submitBtn">Submit</button>
    <p id="textParagraph"></p>
    </form>
</body>

</html>

CodePudding user response：

For the radio buttons, you have to give the same name for all the input tags which you want to group in one tag. And you have used form so when you press submit button it will send a request and the page will reload. solution for that is to use e.preventDefault(). And also you need to add final text into the p tag :

textParagraphElement.textContent

let submitBtnElement = document.getElementById("submitBtn");
let textParagraphElement = document.getElementById("textParagraph");


submitBtnElement.addEventListener("click", function(e){
    e.preventDefault()
    textParagraphElement.textContent = "Your favourite place is:"   document.querySelector('input[name="location"]:checked').value;
});

@import url("https://fonts.googleapis.com/css2?family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&family=Playfair Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap");

.heading {
    font-family: "Roboto";
    font-size: 30px;
}

.label-element {
    font-family: "Roboto";
    font-size: 14px;
}

.button {
    height: 30px;
    width: 65px;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 10px;
    color: white;
    background-color: #327fa8;
}

<!DOCTYPE html>
<html>

<head> </head>

<body>
    <h1 class="heading">Select Your Favourite Place</h1>
    <form id="questionsForm" class="p-4 questions-form">
    <input type="radio" id="favouritePlace" value="Lucknow" name="location"  />
    <label for="favouritePlace" id="label1" class="label-element">Lucknow</label>
    <br/>
    <input type="radio" id="favouritePlace1" value="Agra" name="location" checked />
    <label for="favouritePlace1" id="label2" class="label-element">Agra</label>
    <br/>
    <input type="radio" id="favouritePlace2" value="Varanasi" name="location" />
    <label for="favouritePlace2" id="label3" class="label-element">Varanasi</label>
    <br/>
    <button class="button" id="submitBtn">Submit</button>
    <p id="textParagraph"></p>
    </form>
</body>

</html>

CodePudding user response：

You are missing several things:

Prevent default on your submit function so the page does not refresh after clicking the submit button.
For radios to work as a group you need to give them the same name (see "myRadio" on my snippet)
You are missing a way to know which radio was checked, see my callback function where I get radio and iterate over the values to see which one was checked, this can be done in many different ways, this is just one approach. EDIT: Jay Patel suggested a better approach to get the value directly.

let questionsFormElement = document.getElementById("questionsForm");
let inputElement = document.getElementById("favouritePlace");
let input1Element = document.getElementById("favouritePlace1");
let input2Element = document.getElementById("favouritePlace2");
let label1Element = document.getElementById("label1");
let label2Element = document.getElementById("label2");
let label3Element = document.getElementById("label3");
let submitBtnElement = document.getElementById("submitBtn");
let textParagraphElement = document.getElementById("textParagraph");


submitBtnElement.addEventListener("click", function(e) {
    e.preventDefault();
    const radio = document.querySelector('input[name="myRadio"]:checked').value
                        textParagraphElement.innerHTML = 'Your favorite place is: '   radio;
});

@import url("https://fonts.googleapis.com/css2?family=Bree Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair Display SC:ital,wght@0,400;0,700;1,700&family=Playfair Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source Sans Pro:ital,wght@0,400;0,700;1,700&family=Work Sans:ital,wght@0,400;0,700;1,700&display=swap");

.heading {
    font-family: "Roboto";
    font-size: 30px;
}

.label-element {
    font-family: "Roboto";
    font-size: 14px;
}

.button {
    height: 30px;
    width: 65px;
    font-size: 15px;
    margin-top: 10px;
    margin-left: 10px;
    color: white;
    background-color: #327fa8;
}

<!DOCTYPE html>
<html>

<head> </head>

<body>
    <h1 class="heading">Select Your Favourite Place</h1>
    <form id="questionsForm" class="p-4 questions-form">
    <input type="radio" id="favouritePlace" value="Lucknow" name="myRadio"  />
    <label for="favouritePlace" id="label1" class="label-element">Lucknow</label>
    <br/>
    <input type="radio" id="favouritePlace1" value="Agra" name="myRadio" checked />
    <label for="favouritePlace1" id="label2" class="label-element">Agra</label>
    <br/>
    <input type="radio" id="favouritePlace2" value="Varanasi" name="myRadio" />
    <label for="favouritePlace2" id="label3" class="label-element">Varanasi</label>
    <br/>
    <button class="button" id="submitBtn">Submit</button>
    <p id="textParagraph"></p>
    </form>
</body>

</html>