1

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>

ヘルプや推奨事項をいただければ幸いです。また、重要な概念が欠けている場合は、それも知っておくとよいでしょう。

ありがとう、マイク

4

1 に答える 1

2

追加は機能しますが、同時にフォームが送信されるため、別のページにリダイレクトされます。return falseイベントのイベント ハンドラを介してフォームを送信するブラウザの自然な動作をキャンセルする必要がありますsubmit。

<!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ことですが、ブラウザーの不一致により、それを正しく行うには多くのコードが必要です.. したがって、この基本的な例でonsubmitはreturn false十分なはずです。

于 2012-10-31T19:18:10.237 に答える