使用Javascript的innerHTML问题答案

【问题标题】：Trouble with innerHTML using Javascript使用Javascript的innerHTML问题
【发布时间】：2015-08-22 15:34:34
【问题描述】：

我正在制作一个表单，其中包含用户必须填写的一些字段。一旦他/她填写完毕，点击保存，表单就会消失，并且会出现一个新的 div，其中包含用户填写的内容。不幸的是，我无法在出现的第二个 div 中显示数据。我不确定我做错了什么，也许你可以帮助我？另外，我需要使用纯 Javascript，而不是 jQuery 或其他任何东西。

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>

【问题讨论】：

您是否尝试过使用调试器？你看到什么了吗？
其中一个错误：firstName 变量包含一个字符串，因为document.getElementById('fname').value 给出了一个字符串。因此，你不能写firstName.name 或firstName.value。

标签： javascript innerhtml

【解决方案1】：

<!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>

试试这个，我认为它有效

【讨论】：

【解决方案2】：

试试下面的代码：

<!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>

【讨论】：

【解决方案3】：

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

问题：您没有定位 DOM 对象，您已经定位了它们的值，然后在代码中您尝试获取属性，例如：firstName.name! 将代码顶部的两行更改为此，一切正常。

【讨论】：

【解决方案4】：

一个错误是您在页面呈现后立即从元素中获取值，因此它们都是未定义。

您应该在按下保存按钮后获取它们。在 showData 函数中移动变量声明会有所帮助。

在您的变量中，您还保存了 element.value，从而保存了用户输入的字符串。稍后在创建您尝试作为 HTML 插入的文本时，您可以访问 value 和 name 属性。这意味着您正在尝试使用 element.value.value 和 element.value.name 其中 undefined 用于字符串。

删除变量声明中的value属性会给你元素，然后你就可以得到value和命名属性。

【讨论】：

我用这个补丁做了这个 plunkr。 plnkr.co/edit/aGpI95zm7KRx5XUKxbna?p=preview