Question

我已经制作了一个表单，当你按下go键时，你在文本框中键入的内容出现在屏幕上，只有它不起作用，这里是JavaScript代码： var sentence1; var sentence2; var middlesentence;

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>

Answer 1

您需要将这些句子变量传递给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);
}

Answer 2

此代码存在很多问题。首先，你的paraFunction声明和你的调用有不同的参数。其次，你将按钮命名为paraFunction（这可能不是一个突破性的变化，只是令人困惑）。第三，您尝试使用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>

Answer 3

问题在于作用域和函数调用的方式。见评论

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中第二个参数的名称。（说中等）。虽然这是一个糟糕的解决方案，因为应该最小化全局变量的使用（在窗口范围内，如果是浏览器）。在你没有使用的函数中传递参数也没有意义。

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);
 }

修改这两个函数以接受正确的参数并使用这样的局部变量。

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);
 }

您还需要更改按钮的名称。

使用JavaScript将句子输入网页

3 个答案: