使用JavaScript在网页中输入句子

我制作了一个表单，当您按下go键时，您在文本框中键入的内容会显示在屏幕上，但它不起作用，下面是JavaScript代码： var语句1； var语句2； 中间判决

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>

测试参数
在这个例子中，我将测试参数，下面你会看到一个表格，要求你输入一个句子，你不知道，当你点击表单按钮时，一个句子将在下面完成，你的句子在中间…哎呀

您需要将这些句子变量传递到

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

---

这段代码有很多问题。首先，您的副函数声明和调用具有不同的参数。其次，您将按钮命名为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>

测试参数

在本例中，我将测试参数，下面您将看到一个表单，询问
你需要输入一个句子，你不知道，当你点击表单按钮时，
一个句子将在下面完成，你的句子在中间…哎呀

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

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

有多种方法可以解决您的问题

更改副函数中第二个参数的名称。（说米德尔塞滕斯）。尽管这是一个糟糕的解决方案，因为应该尽量减少全局变量的使用（对于浏览器，在窗口范围内）。另外，在不使用的函数中传递参数也没有意义

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

---

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

您的问题在于作用域

sentence1

和所有其他变量都不在第二个函数的作用域内。这样做不起作用。不幸的是，按“Go”时什么也没有发生