Favourite Place JS动态Web应用单选按钮提交取值功能实现问题

待修复的问题 #

• HTML部分：单选按钮组name属性值不统一，无法实现互斥选中；第三个单选框对应label标签的for属性值错误，点击标签无法选中对应选项
• JS部分：未阻止表单默认提交行为，点击按钮会触发页面刷新；逻辑固定写死了第一个选项的内容，没有动态获取当前选中的单选框值；错误地修改单选输入元素的文本，而非目标段落的展示内容

修复后的完整代码 #

HTML代码

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1 class="heading">选择你最喜欢的地点</h1>
    <form id="questionsForm" class="p-4 questions-form">
        <input type="radio" id="favouritePlace" value="勒克瑙" name="favouritePlace"  />
        <label for="favouritePlace" id="label1" class="label-element">勒克瑙</label>
        <br/>
        <input type="radio" id="favouritePlace1" value="阿格拉" name="favouritePlace" checked />
        <label for="favouritePlace1" id="label2" class="label-element">阿格拉</label>
        <br/>
        <input type="radio" id="favouritePlace2" value="瓦拉纳西" name="favouritePlace" />
        <label for="favouritePlace2" id="label3" class="label-element">瓦拉纳西</label>
        <br/>
        <button class="button" id="submitBtn">提交</button>
        <p id="textParagraph"></p>
    </form>
</body>
</html>

如果需要保留英文地名，直接替换对应value和label的内容即可，不影响逻辑运行。

CSS代码（保留原有样式逻辑）

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

JS代码

const questionsFormElement = document.getElementById("questionsForm");
const submitBtnElement = document.getElementById("submitBtn");
const textParagraphElement = document.getElementById("textParagraph");


submitBtnElement.addEventListener("click", function(e){
    // 阻止表单默认提交导致的页面刷新行为
    e.preventDefault();
    // 获取当前处于选中状态的单选框元素
    const selectedPlace = document.querySelector('input[name="favouritePlace"]:checked');
    // 将选中结果赋值给目标段落展示
    textParagraphElement.textContent = "你最喜欢的地点是：" + selectedPlace.value;
});

调整说明 #

1. 所有单选框统一设置name="favouritePlace"，实现单选互斥效果，阿格拉（Agra）选项保留默认选中属性
2. 修正第三个label的for属性为对应单选框的id，保证点击标签可正常选中对应选项
3. JS逻辑通过选择器直接动态获取当前选中的单选框值，无需为每个单选框单独定义变量，简化代码
4. 新增阻止表单默认提交行为的逻辑，避免点击提交按钮后页面刷新
5. 直接将选中结果赋值给目标段落元素textParagraph完成展示，符合需求

内容的提问来源于stack exchange，提问作者Hari nadh babu