gpt4 book ai didi

javascript - 用户定义的 javascript 对象的方法(原型(prototype))可以使用 document.createElement 吗?

转载 作者:行者123 更新时间:2023-11-30 18:16:24 25 4
gpt4 key购买 nike

我正在尝试了解 JavaScript 中的用户定义对象。具体来说,我正在尝试创建一个用户定义对象的方法,该方法将使用 document.getElementById("holder") 并使用 document.createElement('p' ) 并使用 document.createTextNode("text") 向其附加一个文本节点。

目前,我的方法还没有这样做。我已经测试了该方法并且正在调用它,但是 item.appendChild(otheritem) 的页面中没有显示任何内容。我浏览了其他帖子,但没有人解释我的情况,至少我知道。我的代码如下。

<html>
<head>
<title></title>
<script type="text/javascript">
function Person(fn, ln) {
this.fname = fn;
this.lname = ln;
}
Person.prototype.getFullName = function () {
var myPara = document.createElement('p');
var strFullName = document.createTextNode("super");
myPara.appendChild(strFullName);
var objHolder = document.getElementById("objHolder");
objHolder.appendChild(myPara);
};

function getSome() {
var fN = document.getElementById("fname").value;
var lN = document.getElementById("lname").value;
var Myperson = new Person(fN, lN);
alert(Myperson.fname);
Myperson.getFullName();
}
</script>
</head>
<body>
<form id="holder">First Name:
<input id="fname" type="text" width="40" />Last Name:
<input id="lname" type="text" width="40" />
<button id="buildObj" value="Click" onClick="getSome()">Click</button>
</form>
<div id="objHolder"></div>
</body>
</html>

如有任何帮助或建议,我们将不胜感激。此外,如果我遗漏了一个关键概念,那么知道这也很好。

谢谢,迈克

最佳答案

追加有效,但同时提交了表单,因此它重定向到另一个页面。您需要在 submit 事件的事件处理程序中取消通过 return false 提交表单的自然浏览器行为。

<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script type="text/javascript">
function Person(fn,ln) {
this.fname = fn;
this.lname = ln;
}

Person.prototype.getFullName = function()
{

var myPara = document.createElement('p');
var strFullName = document.createTextNode("super");myPara.appendChild(strFullName);
var objHolder = document.getElementById("objHolder");objHolder.appendChild(myPara);
};

function getSome(){
var fN = document.getElementById("fname").value;
var lN = document.getElementById("lname").value;

var Myperson = new Person(fN,lN);
alert(Myperson.fname);
Myperson.getFullName();
}
</script>
</head>
<body>
<form id="holder">
First Name: <input id="fname" type="text" width="40" />
Last Name: <input id="lname" type="text" width="40" />
<button id="buildObj" value="Click" onClick="getSome()">Click</button>
</form>
<div id="objHolder">
</div>
<script>
document.getElementById('holder').onsubmit=function(){ return false; }
</script>
</body>
</html>

更优雅的方法是使用 event 对象,然后调用 event.preventDefault 但由于浏览器不一致,需要大量代码才能正确处理。所以对于这个基本示例,onsubmitreturn false 应该就足够了。

关于javascript - 用户定义的 javascript 对象的方法(原型(prototype))可以使用 document.createElement 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13165937/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com