Fatal编程技术网
  • javascript/
  • 使用Javascript的innerHTML有问题

使用Javascript的innerHTML有问题

javascript

使用Javascript的innerHTML有问题,javascript,innerhtml,Javascript,Innerhtml,我正在制作一个表单，其中包含一些用户必须填写的字段。一旦他/她填写表单，点击save，表单就会消失，并出现一个新的div，其中包含用户填写的内容。不幸的是，我无法在出现的第二个div中显示数据。我不知道我做错了什么，也许你能帮我？另外，我需要使用纯Javascript，而不是jQuery或其他任何东西 var firstName=document.getElementById（'fname'）.value； var lastName=document.getElementById（'lname

我正在制作一个表单，其中包含一些用户必须填写的字段。一旦他/她填写表单，点击save，表单就会消失，并出现一个新的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）{
变量性别='男性'；
}否则{
性别=‘女性’；
}
函数showData（）{
如果（form.style.display！=“无”）{
form.style.display='none'；
edit.style.display='block'；
}否则{
form.style.display='block'；
}
parname.innerHTML=[
firstName.name+“：“+firstName.value+”
“，
lastName.name+“：“+lastName.value+”
“，
state.name+“：“+state.options[state.selectedIndex].text+”
”
].加入（“”）；
}
函数editData（）{
如果（edit.style.display！=“无”）{
edit.style.display='none'；
form.style.display='block'；
}否则{
edit.style.display='block'；
}
}

名字：
姓氏：
男性
女性
-请选择-
宾夕法尼亚
新泽西州
威斯康星州
华盛顿




名字：
姓氏：
男性
女性
-请选择-
宾夕法尼亚
新泽西州
威斯康星州
华盛顿


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）{
变量性别='男性'；
}否则{
性别=‘女性’；
}
函数showData（）{
如果（form.style.display！=“无”）{
form.style.display='none'；
edit.style.display='block'；
}否则{
form.style.display='block'；
}
parname.innerHTML=[
firstName.name+“：“+firstName.value+”
“，
lastName.name+“：“+lastName.value+”
“，
state.name+“：“+state.options[state.selectedIndex].text+”
”
].加入（“”）；
}
函数editData（）{
如果（edit.style.display！=“无”）{
edit.style.display='none'；
form.style.display='block'；
}否则{
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 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>


名字：
姓氏：
男性
女性
-请选择-
宾夕法尼亚
新泽西州
威斯康星州
华盛顿


函数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）{
变量性别='男性'；
}否则{
性别=‘女性’；
}
如果（form.style.display！=“无”）{
form.style.display='none'；
edit.style.display='block'；
}否则{
form.style.display='block'；
}
parname.innerHTML=[
“名字：”+firstName+“
”，
姓氏：“+lastName+”
“，
状态：“+state.options[state.selectedIndex].text+”
“
].加入（“”）；
}
函数editData（）{
如果（edit.style.display！=“无”）{
edit.style.display='none'；
form.style.display='block'；
}否则{
edit.style.display='block'；
}           
}
问题：您没有以DOM对象为目标，而是以它们的值为目标，然后在代码中尝试获取属性，如：
firstName.name
！
将代码顶部的两行更改为这一行，一切都会正常工作。

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

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

另外，在变量中保存元素.value，因此savi 
<!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>

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