最喜歡的地方JavascriptWeb應用程式-有解無憂

在這個最喜歡的地方動態 Web 應用程式實作了 HTML、CSS 的設計和 JS 的功能。我還沒有用 JS 來完成這個功能，我面臨著問題

單擊提交按鈕時

HTML 段落元素中的文本內容應包含選中的 HTML 單選輸入元素的值。

以下是預期輸出的影像：-

最喜歡的地方輸出影像：

最喜歡的地方 Javascript Web 應用程式

注意：- 值為 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>

uj5u.com熱心網友回復：

對于單選按鈕，您必須為要組合在一個標簽中的所有輸入標簽指定相同的名稱。并且您已經使用了表單，因此當您按下提交按鈕時，它會發送一個請求并且頁面將重新加載。解決方案是使用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>

uj5u.com熱心網友回復：

你錯過了幾件事：

防止默認提交功能，以便在單擊提交按鈕后頁面不會重繪。
要使收音機作為一個組作業，您需要為它們命名相同的名稱（請參閱我的代碼片段中的“myRadio”）
您缺少一種知道檢查了哪個無線電的方法，請參閱我獲取無線電的回呼函式并遍歷值以查看檢查了哪個值，這可以通過多種不同的方式完成，這只是一種方法。編輯：杰伊帕特爾提出了一種更好的方法來直接獲取價值。

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318162.html

標籤：javascript html dom dom事件

上一篇：如何控制具有不同名稱屬性的許多輸入元素的輸入行為？

下一篇：如何在單擊時將HTML中按鈕的文本顏色更改為隨機顏色？