[英]How to change text in two paragraphs if one of the radio buttons is checked? JS
我有一個表格，根據選中的單選按鈕（公制或英制），兩個段落應顯示 KG + CM 或 LBS + IN。 現在它只顯示 KG 或 LBS 兩次。 在 vanilla JS 中尋找解決方案。 這是我正在研究的計算器。
const paragraphWeightElement = document.querySelector(".js-paragraphWeight"); const paragraphHeightElement = document.querySelector(".js-paragraphHeight"); const form = document.querySelector(".js-form"); form.addEventListener("input", (event) => { paragraphWeightElement.innerText = event.target.value; paragraphHeightElement.innerText = event.target.value; });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script defer src="js/script.js"></script> <link href="css/style.css" rel="stylesheet" /> </head> <body> <form class="js-form"> <ul> <li> <label> <input class="js-metric" type="radio" value="KG" name="weight" /> Metric </label> </li> <li> <label class="form__label"> <input class="js-imperial" type="radio" value="LBS" name="weight" /> Imperial </label> </li> </ul> </form> <p class="js-paragraphWeight"></p> <p class="js-paragraphHeight"></p> </body> </html>
您不需要使用event.target而是找到已檢查的元素。
對於單位查找，請使用簡單的查找地圖。
const paragraphWeightElement = document.querySelector(".js-paragraphWeight"); const paragraphHeightElement = document.querySelector(".js-paragraphHeight"); const form = document.querySelector(".js-form"); const unitLookupMap = { metric: { weight: 'kg', height: 'meters' }, imperial: { weight: 'lbs', height: 'yards' }, } form.addEventListener("input", (event) => { const checked = form.querySelector('[name=units]:checked'); paragraphWeightElement.textContent = unitLookupMap[checked.value].weight; paragraphHeightElement.textContent = unitLookupMap[checked.value].height; });
<form class="js-form"> <ul> <li> <label> <input class="js-metric" type="radio" value="metric" name="units" /> Metric </label> </li> <li> <label class="form__label"> <input class="js-imperial" type="radio" value="imperial" name="units" /> Imperial </label> </li> </ul> </form> <p class="js-paragraphWeight"></p> <p class="js-paragraphHeight"></p>
如果用戶未選中兩個單選按鈕之一，如何停止表單提交
[英]How to stop form submission if one of two radio buttons are not checked by user
如何在重置其他兩個的文本時更改選中的單選按鈕元素上的文本？
[英]How do I change the text on a checked radio button element while resetting the text of the other two?
如何重置除具有選中屬性的單選按鈕之外的所有單選按鈕？
[英]How to reset all radio buttons except for the one with a checked attribute?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.