首页 > 解决方案 > 我需要将值从单选按钮写入控制台(JS const)

问题描述

let opinions = [];

if (localStorage.myTreesComments) {
    opinions = JSON.parse(localStorage.myTreesComments);
}

console.log(opinions);


const myFrmElm = document.getElementById("opnFrm");

myFrmElm.addEventListener("submit", processOpnFrmData);

function processOpnFrmData(event) {

    const nopName = document.getElementById("menoapriezvisko").value.trim();
    const nopEmail = document.getElementById("email").value.trim();
    const nopUrl = document.getElementById("url").value.trim();
    const nopComm = document.getElementById("komentar").value.trim();

    const nopStar1 = document.getElementById("star-rating").value.trim();
    const nopStar2 = document.getElementById("star-rating2").value.trim();
    const nopScale = document.getElementById("scale-rating").value.trim();


    const nopWillReturn = document.getElementById("willReturnElm").checked;

    if (nopName == "" || nopEmail == "" || nopUrl == "" || nopComm == "") {
        window.alert("Prosím, zadajte všetky údaje.");
        return;
    }

    const newOpinion = {
        name: nopName,
        email: nopEmail,
        url: nopUrl,
        comment: nopComm,
        gdpr: nopWillReturn,
        created: new Date()
    };

    console.log("Nový názor návštevníka:\n " + JSON.stringify(newOpinion));

    opinions.push(newOpinion);

    localStorage.myTreesComments = JSON.stringify(opinions);

    //4. Notify the user
    window.alert("Tvoj názor bol uložený! Pre viac info nahliadni do konzole.");
    console.log("Nový názor bol pridaný!");
    console.log(opinions);

    //5. Reset the form
    myFrmElm.reset();

}
<form id="opnFrm">
   <label for="menoapriezvisko">Meno a priezvisko</label>
   <input type="text" id="menoapriezvisko" name="menoapriezvisko">
   <label for="email">Kontaktný email</label> <input type="email" id="email">
   <label>1. Celková spokojnosť s dizajnom a funkcionalitou stránky ?</label><br>
   <span class="star-rating">
   <input type="radio" name="rating1" value="1"><i></i>
   ........................
   <input type="radio" name="rating1" value="5"><i></i>
   </span>
   <div class="clear"></div>
   <hr class="survey-hr">
   <label>2. Celková spokojnosť s obsahom.</label><br>
   <span class="star-rating2">
   <input type="radio" name="rating2" value="1"><i></i>
   ..........................
   <input type="radio" name="rating2" value="5"><i></i>
   </span>
   <div class="clear"></div>
   <hr class="survey-hr">
   <label style="color: red;"><b>3. Celkové hodnotenie stránky (1-10)</b></label>
   <span class="scale-rating">
   <label value="1">
   <input type="radio" name="rating" >
   <label style="width:100%;"></label>
   </label>
   <label value="2">
   <input type="radio" name="rating" >
   <label style="width:100%;"></label>
   </label>
   ..................
   <label value="10">
   <input type="radio" name="rating" value="10">
   <label style="width:100%;"></label>
   </label>
   </span>
   <div class="clear"></div>
   <input style="background:#43a7d5;color:#fff;padding:12px;border:0" type="submit" value="Odoslať">
   <button type="submit">Odošli</button>
   <input style="background:#43a2d1;color:#fff;padding:12px;border:0" type="reset" value="Resetuj">
</form>
</div>
</article>

我需要将 3 个单选按钮跨度的值写入我的 JS 脚本到 const Opinions。

在前 2 个跨度中,我的星级评分为 1-5,在第三个跨度中,我有积分 (1-10)。我需要读取这些值并将它们写入我的脚本。如果你能帮助我,我会很高兴的。这对我来说很难。

我正在使用 jQuery 和 Javascript。

谢谢你的帮助。

标签: javascripthtmljquerycssradio-button

解决方案


推荐阅读