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

Posted 2023-02-21

技术标签:

【中文标题】最喜欢的地方 Javascript Web 应用程序【英文标题】：Favourite Place Javascript web application 【发布时间】：2021-11-18 05:23:18 【问题描述】：

在这个最喜欢的地方 动态Web 应用程序使用html、CSS 和JS 功能实现设计。我没有用 JS 做这个功能，我面临的问题是

点击提交按钮时

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

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

Favorite Place 输出图像：

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

您可以使用 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>

【问题讨论】：

【参考方案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>

【讨论】：

如果此解决方案不适合您，请告诉我。如果可行，请接受答案并投票并关闭问题。谢谢。好的，先生，您提供的代码很棒，但最后一个单选按钮瓦拉纳西没有得到点击已修复，现在检查一下。那是因为瓦拉纳西标签中的“for”错误。希望这个问题得到解决。【参考方案2】：

你遗漏了几件事：

防止您的提交功能出现默认设置，以便在单击提交按钮后页面不会刷新。要使收音机作为一个组工作，您需要给它们起相同的名称（请参阅我的 sn-p 上的“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 应用程序的主要内容，如果未能解决你的问题，请参考以下文章

你最喜欢用哪款前端开发工具？为啥？

什么是前端开发人员最喜欢的前端工具？

我想在不直接使用 JavaScript 的情况下制作“Web 2.0”应用程序

亲测最好用的4个JavaScript编辑器

高逼格的具有编程连字的等宽字体，最适合在编程编辑器，终端中使用

2017酷码 JavaScript班编程MVP评选活动