Question

我试图更好地理解javascript对象以及如何将一些数据实际放回div中。我创建了简单的表单，以便：1）检索数据到HTML，2。）将它们变成变量，3。）在另一个div中显示那些变量（看看前一步是否工作正常）4。）使用变量构造对象5.）在div中显示对象的属性（再次查看前一步是否正常）。无论我做什么，我都无法在HTML中显示对象的变量。

＆＃13;

function processFormData() {
	
	var fname = document.getElementById('input-name');
	var sname = document.getElementById('input-surname');
	
	var fnameTest = "Name: " + fname.value; 
	var snameTest = "Surname: " + sname.value;
	
	
	document.getElementById('fname-display').innerHTML=fnameTest;
	document.getElementById('sname-display').innerHTML=snameTest;

	People();

}

function People(fname,sname) {
	this.fn = fname;
	this.sn = sname;
	
}

var people = new People(
    fname,
    sname,
);

//function showPeople() {
// alert(people.fn);
//  alert(people.sn);
//};

function processObjData() {
	
	var objFname = "Name: " + people.sn; 
	var objSname = "Surname: " + people.sn;
	
	showPeople();

}

function showPeople() {
	document.getElementById('fname-display-obj').innerHTML=objFname;
	document.getElementById('sname-display-obj').innerHTML=objSname;
};

showPeople();

＆＃13;

<form action="#">
<div class="col">
<input type="text" name="fname" id="input-name" class="form-control" placeholder="Name">
<input type="text" name="sname" id="input-surname" class="form-control" placeholder="Surname">
</div>
<button type="submit" onclick="processFormData(); return false;" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
</form>
<div class="col visual">
	<div id="fname-display"></div>
	<div id="sname-display"></div>
</div>
<div class="col visual">
	<div id="fname-display-obj"></div>
	<div id="sname-display-obj"></div>
</div>

＆＃13;

如果我在控制台中运行它，但使用部分警报制作版本

showPeople()

（此处已禁用）且没有完全休息，警报会正常显示。我也尝试了括号或放

.value

在属性之后但没有任何效果。

我做错了什么？

无法在内部HTML中显示javascript对象属性

0 个答案: