3

フォームで getElementById を使用すると問題が発生します。私はいくつかの方法を試しましたが、うまくいきませんでした。基本的に、名前と姓の両方のフィールドが入力されていることを確認し、名前が表示されたポップアップ ボックスを表示するフォームが必要です。

以下は私が試したコードです。JavaScript で 2 つの異なる方法を試しましたが、何が欠けているのかわかりません。

<form name="form" id="form" method="post" action="">  

    <p class="FirstName">  
        <label for="FirstName">First Name:</label>
    </p>
    <p>
        <input name="FirstName" type="text" id="FirstName" />  
    </p>  

    <p class="LastName">  
        <label for="LastName">Last Name:</label></p>
        <p>
        <input name="LastName" type="text" id="LastName" />  
    </p>

    <p class="submit">  
        <input name="getName" type="button" id="getName" value="Get Name" onClick=”getName();" />  
    </p>  
</form>

var getName = function () {
    if (document.getElementById("FirstName").value == "" || document.getElementById("LastName").value == "") {
        return ("Please enter a first name and a last name.");
    } else {
        var FullName = document.getElementById("FirstName").value + ' ' + document.getElementById("LastName").value;
        return FullName;
    }
}


function getName() {
    var FullName = document.getElementById('FirstName');
    document.getElementById('LastName');
    if (FullName.value != "") 
        alert(FullName.value)
    else 
        alert("Please enter first and last name")
}
4

2 に答える 2

4

あなたが最初に試みた方法は正しいものでした。

問題は、onclickイベントを関数にバインドしていないことです。

タグの前に解釈さgetNameれたタグで関数を宣言します。headbody

getNameただし、ボタンinputをidと にname設定して宣言するときに上書きしますgetName。

submitButtonたとえば、そのIDと名前を変更するだけです。関数宣言をタグの最後に移動するか、メソッドbodyでラップすることもできます。onLoad

getName結果を確認するために呼び出しをアラートでラップしました ( alert(getName()))

jsFiddle をチェックしてください: http://jsfiddle.net/zpNSv/1/

<form name="form" id="form" method="post" action="">  
    <p class="FirstName">  
        <label for="FirstName">First Name:</label>
    </p>
    <p>
        <input name="FirstName" type="text" id="FirstName" />  
    </p>  
    <p class="LastName">  
        <label for="LastName">Last Name:</label>
    </p>
    <p>
        <input name="LastName" type="text" id="LastName" />  
    </p>
    <p class="submit">  
        <input name="submitButton" type="button" id="submitButton" value="Get Name" onClick="alert(getName())" />
    </p>  
 </form>

そしてJS

function getName() {
    var FirstName = document.getElementById("FirstName"),
        LastName = document.getElementById("FirstName");
    if (FirstName.value == "" ||   document.getElementById("LastName").value == "")
    {
        return ("Please enter a first name and a last name.");
    }
    else
    {
        var FullName = FirstName.value + ' ' + LastName.value;
        return FullName;
    }
}
于 2013-04-07T16:28:09.337 に答える