Question

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

＆＃13;

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';
  }
}

＆＃13;

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

＆＃13;

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

尝试这个，我认为它正在运作

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

Answer 3

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

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

Answer 4

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

按下保存按钮后应该得到它们。在 showData 函数中移动变量声明将有助于此。

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

删除变量声明中的值属性会为您提供元素，之后您可以获得值和名称属性。

使用Javascript解决innerHTML问题

4 个答案: