最喜欢的地方 Javascript Web 应用程序

Question

在此最喜欢的地方 动态Web 应用程序实现了HTML、CSS 的设计和JS 的功能。我没有使用 JS 来实现功能，我遇到了问题

单击“提交”按钮时

HTML 段落元素中的文本内容应包含值选中的 HTML 无线电输入元素。

下面是预期输出的图像：-

最喜欢的地方输出图像：

注意：- HTML 值为 Agra 的单选输入元素，默认情况下应该检查属性。

您可以使用 HTML 表单元素。

这是我试过的代码

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>

Answer 1

对于单选按钮，您必须为要归入一个标签的所有输入标签指定相同的名称。你已经使用了表单，所以当你按下提交按钮时，它会发送一个请求并且页面会重新加载。解决方案是使用 e.preventDefault()。您还需要将最终文本添加到 p 标签中：

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>

Answer 2

您遗漏了几件事：

防止提交功能出现默认设置，这样页面在点击提交按钮后不会刷新。
要使收音机作为一个组工作，您需要为它们指定相同的名称（请参阅我的代码段中的“myRadio”）
您缺少一种方法来了解检查了哪个无线电，请查看我的回调函数，我在其中获取无线电并遍历值以查看检查了哪个无线电，这可以通过多种不同的方式完成，这只是其中一种方法。编辑：Jay Patel 提出了一种更好的方法来直接获取价值。

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>

最喜欢的地方 Javascript Web 应用程序

Favourite Place Javascript web application

html

javascript

dom

dom-events