получение значения радио и запись обратно с помощью innerHtml

Я знаю, что было много вопросов относительно получения значения переключателя, и я прошел через все это. Проблема, с которой я сталкиваюсь, заключается в том, что я создал форму, и после ее отправки я должен снова показать пользователю, какой переключатель, который он выбрал, используя модальный. Я создал модальный, и все работает отлично. Я могу записать имя и возраст пользователя обратно в новый режим, но переключатель не выбран. Это javascript, который я использовал

function displayContent(){
    var name=document.getElementById("Name").value;
    var comment=document.getElementById("comment").value;

    var ratings = document.getElementsByName('rating');
    var rate_value;     
    for(var i = 0; i < rating.length; i++){
    if(rating[i].checked){
       rate_value = rating[i].value;
    }

    return "";

   /*these lines are used to write the details into the new modal*/
   document.getElementById("username").textContent = name;
   document.getElementById("usercomment").textContent=comment;
   document.getElementById("userrating").innerHTML=rate_value;
}

До того, как я добавил часть массива радиокнопки, модальный получил имя пользователя и комментарий, но после этого вся вещь не работала. Поэтому я знаю, что это проблема. Вот мой Html

<form name="FeedbackForm">
    Name: <input id="Name" type="text" placeholder="Name"> 
    E-Mail: <input id="E-mail" type="email" placeholder="E-mail"> What do you think about us? <br>
    <textarea id="comment" rows="6" cols="33" "name="comment "></textarea><br>How would you rate us ?<br>
       <label><input type ="radio " name="rating " id="rating " value="Excellent ">Excellent</label>
       <label><input type ="radio " name="rating " id="rating " value="Very Good ">Very Good</label>
       <label><input type ="radio " name="rating " id="rating " value="Average ">Average</label>
       <label><input type ="radio " name="rating " id="rating " value="Poor ">Poor</label>
       <label><input type ="radio " name="rating "id="rating " value="Extreamly Poor ">Extremely Poor</label><br>
       <a href="# " id="submit " onclick="displayContent();setTimeout(closePopup,10000) ">SUBMIT</a>                                
</form>

Вот Модальный я создал

<div class="popup">
    <div class="popuptext" id="myPopup">
        <p>Thank you
            <span id="username"></span> ,
            <br>Your feedback has been recorded.
            <br>
            <br>You commented that"
            <span id="usercomment"></span>"
            <br>
            <br>and rated our website "
            <span id="userrating"></span>".
            <br>
            <br>Thank you for taking your time to do so.
            <br>
            <br>You will now be re-directed automatically</p>
    </div>
</div>

обратите внимание, что котировочные символы, которые я использовал, чтобы поместить его вокруг «Комментировать, что пользователь входит»,

Спасибо заранее (обратите внимание, что я хочу, чтобы это было сделано в java-скрипте, так как я понятия не имею о JQuery, и мне не разрешено использовать его

javascript,html,

0

Ответов: 2

1 принят

В коде есть несколько ошибок. Но самая большая ошибка, кажется, return "";правильная перед выходом ввода. В returnработает как остановка на функцию и остановил ее , прежде чем она могла бы выход ответы. Я думаю, что это то, что я думаю, что вы этого хотели:

function displayContent() {
    var name=document.getElementById("Name").value;
    var comment=document.getElementById("comment").value;

    var ratings = document.getElementsByName('rating');
    var rate_value;        
    for(var i = 0; i < rating.length; i++){
        if(rating[i].checked){
            rate_value = rating[i].value;
        }
     }

     /*these lines are used to write the details into the new modal*/
     document.getElementById("username").textContent = name;
     document.getElementById("usercomment").textContent = comment;
     document.getElementById("userrating").innerHTML = rate_value;

     return "";
 }
<form name="FeedbackForm">
    Name: <input id="Name"type="text" placeholder="Name">
    E-Mail: <input id="E-mail"type="email" placeholder="E-mail">
    What do you think about us?<br>
    <textarea id="comment" rows="6" cols="33" name="comment"></textarea><br>
    How would you rate us ?<br>
    <label><input type ="radio" name="rating" id="rating" value="Excellent">Excellent</label>
    <label><input type ="radio" name="rating" id="rating" value="Very Good">Very Good</label>
    <label><input type ="radio" name="rating" id="rating" value="Average">Average</label>
    <label><input type ="radio" name="rating" id="rating" value="Poor">Poor</label>
    <label><input type ="radio" name="rating"id="rating" value="Extreamly Poor">Extremely Poor</label>
    <br>
    <a href="#" id="submit" onclick="displayContent()">SUBMIT</a>
    </form>

    <br>
    <hr>
    <br>

    <div class="popup">
        <div class="popuptext" id="myPopup">
            <p>Thank you <span id="username"></span>,
            <br>Your feedback has been recorded.<br> 
            <br>You commented that"<span id="usercomment"></span>" <br><br>and rated our website "<span id="userrating"></span>".
             <br><br>Thank you for taking your time to do so.<br><br>You will now be re-directed automatically</p>
        </div>
    </div>

0

Я думаю, что проблема связана с именем переменной. ratingвместо использования ratings.

var rating = document.getElementsByName('rating');

Это работает для меня.

JavaScript, HTML,
Похожие вопросы
Яндекс.Метрика