0

テキスト ボックスに入力した内容が [go] を押すと画面に表示されるフォームを作成しましたが、機能していません。JavaScript コードは次のとおりです。var 文 2; var ミドルセンテンス;

function paraFunction(setence1, middlesentence, setence2)
{
sentence1 = "You plan is to ";
sentence2 = " and you must succeed at all costs";
middlesentence = form.strPara.value;
paraShow();
}

function paraShow()
{
document.getElementById('paraAns').innerHTML = (sentence1 + middlesentence + sentence2);
}

HTMLコードは次のとおりです。

<div id="innerbody">
</div>
<h1>Testing Parameters</h1>
<p>In this example, I will be testing parameters, below you will see a form, asking you to enter a sentence, little do you know, that when you click on the form button, a sentence will be completed below, with your sentence in the middle... oops!</p>
<form type="paraForm" method="get">
<input type="text" placeholder="Input your sentence here" id="strPara"/>
<input type="button" value="Go!" name="paraFunction" onClick="paraFunction(this.form);"/>
</form>
<p id="paraAns"></p>
</div>
4

3 に答える 3

0

問題は、スコープと関数呼び出しの方法にあります。コメントを見る

function paraFunction(setence1, middlesentence, setence2)
{
    /* The function is called as 'paraFunction(this.form)' */
    /* At this time the value of the three arguments will be */
    /* setence1 = this.form */
    /* middlesentence = setence2 = undefined */

    /* This will create a variable 'sentence1' in global scope */
    /* name of the local variable is setence1 and not sentence1 */
    sentence1 = "You plan is to ";

    /* This will create a variable 'sentence2' in global scope */ 
    sentence2 = " and you must succeed at all costs"; 

    /* variable middlesentence is in local scope. won't be accessible outside */
     /* form is not defined in this scope, it should have been setence1 */
     middlesentence = form.strPara.value; 
     paraShow();
}

function paraShow()
{
 /*sentence1 and sentence2 will be accessible to this function but not middlesentence */        
 document.getElementById('paraAns').innerHTML = (sentence1 + middlesentence + sentence2);
}

問題を解決する方法は複数あります

paraFunctionの2番目の引数の名前を変更します。（ミドルセットと言います）。グローバル変数の使用を最小限に抑える必要があるため、これは悪い解決策ですが（ブラウザーの場合はウィンドウスコープ内）。また、使用していない関数で引数を渡すことは意味がありません。

function paraFunction(setence1, middlesetence, setence2)
{
    sentence1 = "You plan is to ";
    sentence2 = " and you must succeed at all costs";
    middlesentence = setence1.strPara.value;
    paraShow();
 }

 function paraShow()
 {
     document.getElementById('paraAns').innerHTML = (sentence1 + middlesentence + sentence2);
 }

2つの関数を変更して、正しいパラメーターを受け入れ、このようなローカル変数を使用します。

function paraFunction(form)
{
    var sentence1 = "You plan is to ";
    var sentence2 = " and you must succeed at all costs";
    var middlesentence = form.strPara.value;
    paraShow(sentence1,middlesentence,sentence2);
 }

 function paraShow(sentence1,middlesentence,sentence2)
 {
     document.getElementById('paraAns').innerHTML = (sentence1 + middlesentence + sentence2);
 }

ボタンの名前も変更する必要があります。

于 2013-03-07T17:00:26.033 に答える
0

このコードにはかなりの問題がありました。まず、paraFunction 宣言と呼び出しに異なるパラメーターがありました。次に、ボタンに paraFunction という名前を付けました (これはおそらく破壊的な変更ではなく、紛らわしいだけです)。3 番目に、form.strPara を使用して strPara にアクセスしようとしましたが、form というフォームがないため機能しません。それらが片付けられると、コードは正常に動作します:

function paraFunction() {
    sentence1 = "You plan is to ";
    sentence2 = " and you must succeed at all costs";
    middlesentence = document.getElementById('strPara').value;
    paraShow();
}

function paraShow() {
    document.getElementById('paraAns').innerHTML = (sentence1 + middlesentence + sentence2);
}

そしてHTML：

<div id="innerbody">
</div>
<h1>
    Testing Parameters</h1>
<p>
    In this example, I will be testing parameters, below you will see a form, asking
    you to enter a sentence, little do you know, that when you click on the form button,
    a sentence will be completed below, with your sentence in the middle... oops!</p>
<form type="paraForm" method="get">
<input type="text" placeholder="Input your sentence here" id="strPara" />
<input type="button" value="Go!" name="paraFun" onclick="paraFunction();" />
</form>
<p id="paraAns">
</p>
</div>
于 2013-03-07T16:55:48.247 に答える
0

これらの文変数をに渡す必要がありますparaShow

function paraFunction(setence1, middlesentence, setence2) {
    sentence1 = "You plan is to ";
    sentence2 = " and you must succeed at all costs";
    middlesentence = form.strPara.value;
    paraShow(sentence1, middlesentence, sentence2);
}

function paraShow(sentence1, middlesentence, sentence2) {
    document.getElementById('paraAns').innerHTML = (sentence1 + middlesentence + sentence2);
}
于 2013-03-07T16:37:11.047 に答える