Проблема с innerHTML с помощью Javascript

Я делаю форму с некоторыми полями, которые пользователь должен заполнить. Когда он/она заполняет его, удары сохраняются, форма исчезает, и появляется новый div с тем, что пользователь заполнил. К сожалению, я не могу получить данные для показа в этом втором div, который появляется. Я не уверен, что я делаю неправильно, может быть, вы можете мне помочь? Кроме того, мне нужно использовать чистый Javascript, а не jQuery или что-то еще.Проблема с innerHTML с помощью Javascript

var firstName = document.getElementById('fname').value; 
 
var lastName = document.getElementById('lname').value; 
 
var state = document.getElementById('select_state'); 
 
var whichState = state.options[state.selectedIndex].text; 
 
var parname = document.getElementById('pname'); 
 
var form = document.getElementById('form_div'); 
 
var edit = document.getElementById('view_div'); 
 

 
if (document.getElementById('m').checked == true) { 
 
    var Gender = 'Male'; 
 
} else { 
 
    Gender = 'female'; 
 
} 
 

 
function showData() { 
 
    if (form.style.display != 'none') { 
 
    form.style.display = 'none'; 
 
    edit.style.display = 'block'; 
 
    } else { 
 
    form.style.display = 'block'; 
 
    } 
 
    parname.innerHTML = [ 
 
    firstName.name + " : " + firstName.value + "<hr>", 
 
    lastName.name + " : " + lastName.value + "<hr>", 
 
    state.name + " : " + state.options[state.selectedIndex].text + "<hr>" 
 
    ].join(""); 
 
} 
 

 
function editData() { 
 
    if (edit.style.display != 'none') { 
 
    edit.style.display = 'none'; 
 
    form.style.display = 'block'; 
 
    } else { 
 
    edit.style.display = 'block'; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <div id="form_div"> 
 
    <form> 
 
     First Name: 
 
     <input type="text" name="First Name" id="fname">Last Name: 
 
     <input type="text" name="Last Name" id="lname"> 
 
     <input type="radio" name="Gender" id="m" value="male" checked>Male 
 
     <input type="radio" name="Gender" id="f" value="female">Female 
 
     <select name="state" id="select_state"> 
 
     <option value="select">- Please Select -</option> 
 
     <option value="PA">Pennsylvania</option> 
 
     <option value="NJ">New Jersey</option> 
 
     <option value="WI">Wisconsin</option> 
 
     <option value="WA">Washington</option> 
 
     </select> 
 
    </form> 
 
    <input type="submit" value="Save" onclick="showData();"> 
 

 
    </div> 
 

 
    <div id="view_div" style="display:none;"> 
 
    <button id="edit" value="Edit" onclick="editData();"></button> 
 
    <p id="pname"></p> 
 
    </div> 
 

 
    <body> 
 

 
</html>

источник

2015-08-22 alexnewby

Пробовал ли вы использовать отладчик? Вы что-нибудь видели? – Amit

Одна ошибка среди других: переменная 'firstName' содержит строку с' document.getElementById ('fname'). Value' дает строку. Следовательно, вы не можете писать 'firstName.name' или' firstName.value'. – leaf

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div id="form_div"> 
     <form> 
      First Name: 
      <input type="text" name="First Name" id="fname"> 
      Last Name: 
      <input type="text" name="Last Name" id="lname"> 
      <input type="radio" name="Gender" id="m" value="male" checked>Male 
      <input type="radio" name="Gender" id="f" value="female">Female 
      <select name="state" id="select_state"> 
       <option value="select">- Please Select -</option> 
       <option value="PA">Pennsylvania</option> 
       <option value="NJ">New Jersey</option> 
       <option value="WI">Wisconsin</option> 
       <option value="WA">Washington</option> 
      </select> 
     </form> 
     <input type="submit" value="Save" onclick="showData();"> 


    </div> 

    <div id="view_div" style="display:none;"> 
     <button type="button" id="edit" value="Edit" onclick="editData();"> 
     <p id="pname"></p> 
    </div> 

    <script> 
     var firstName = document.getElementById('fname'); 
     var lastName = document.getElementById('lname'); 
     var state = document.getElementById('select_state'); 
     var whichState = state.options[state.selectedIndex].text; 
     var parname = document.getElementById('pname'); 
     var form = document.getElementById('form_div'); 
     var edit = document.getElementById('view_div'); 

     if (document.getElementById('m').checked == true) { 
      var Gender = 'Male'; 
     } else { 
      Gender = 'female'; 
     } 

     function showData() { 
      if (form.style.display != 'none') { 
       form.style.display = 'none'; 
       edit.style.display = 'block'; 
      } else { 
       form.style.display = 'block'; 
      } 
      parname.innerHTML = [ 
        firstName.name + " : " + firstName.value + "<hr>", 
        lastName.name + " : " + lastName.value + "<hr>", 
        state.name  + " : " + state.options[state.selectedIndex].text + "<hr>" 
       ].join(""); 
     } 
     function editData() { 
      if (edit.style.display != 'none') { 
       edit.style.display = 'none'; 
       form.style.display = 'block'; 
      } else { 
       edit.style.display = 'block'; 
      }   
     } 
    </script> 
</body> 
</html>

попробовать это я думаю, что это работает

источник

2015-08-22 15:46:05

попробуйте следующий код:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div id="form_div"> 
     <form> 
      First Name: 
      <input type="text" name="First Name" id="fname"> 
      Last Name: 
      <input type="text" name="Last Name" id="lname"> 
      <input type="radio" name="Gender" id="m" value="male" checked>Male 
      <input type="radio" name="Gender" id="f" value="female">Female 
      <select name="state" id="select_state"> 
       <option value="select">- Please Select -</option> 
       <option value="PA">Pennsylvania</option> 
       <option value="NJ">New Jersey</option> 
       <option value="WI">Wisconsin</option> 
       <option value="WA">Washington</option> 
      </select> 
     </form> 
     <input type="submit" value="Save" onclick="showData();"> 

    </div> 

    <div id="view_div" style="display:none;"> 
     <button type="button" id="edit" value="Edit" onclick="editData();"> 
     <p id="pname"></p> 
    </div> 

    <script> 


     function showData() { 
      var firstName = document.getElementById('fname').value; 
     var lastName = document.getElementById('lname').value; 
     var state = document.getElementById('select_state'); 
     var whichState = state.options[state.selectedIndex].text; 
     var parname = document.getElementById('pname'); 
     var form = document.getElementById('form_div'); 
     var edit = document.getElementById('view_div'); 

     if (document.getElementById('m').checked == true) { 
      var Gender = 'Male'; 
     } else { 
      Gender = 'female'; 
     } 
      if (form.style.display != 'none') { 
       form.style.display = 'none'; 
       edit.style.display = 'block'; 
      } else { 
       form.style.display = 'block'; 
      } 
      parname.innerHTML = [ 
        " First Name : " + firstName + "<hr>", 
        " Last Name : " + lastName + "<hr>", 
        " state : " + state.options[state.selectedIndex].text + "<hr>" 
       ].join(""); 
     } 
     function editData() { 
      if (edit.style.display != 'none') { 
       edit.style.display = 'none'; 
       form.style.display = 'block'; 
      } else { 
       edit.style.display = 'block'; 
      }   
     } 
    </script> 
</body> 
</html>

источник

2015-08-22 15:46:44

var firstName = document.getElementById('fname'); 
var lastName = document.getElementById('lname');

Проблема: вы не сделали целевые объекты DOM, вы нацелили их значения, а позже в коде вы пытаетесь получить свойства, например: firstName.name! Измените две строки в верхней части кода, и все должно работать нормально.

источник

2015-08-22 15:48:59 sinisake

Одна ошибка заключается в том, что вы получаете значения из элементов сразу после визуализации страницы, таким образом, все они undefined.

Вы должны получить их после нажатия кнопки сохранения. Перемещение деклараций переменных внутри функции showData поможет.

Также в ваших переменных вы сохраняете значение element.value, сохраняя при этом строку, введенную пользователем. Позже при создании текста, который вы пытаетесь вставить в качестве HTML, вы получаете значение и name. Это означает, что вы пытаетесь использовать element.value.value и element.value.name которое не определено для строк.

Удаление значения свойства в вашем объявлении переменного даст вам элемента, а затем вы можете просто получить значение, и Name свойства из него.

источник

2015-08-22 16:26:00 toskv

Я сделал это plunkr с исправлением. http://plnkr.co/edit/aGpI95zm7KRx5XUKxbna?p=preview – toskv

ответ

Смежные вопросы