使用JavaScript向網頁輸入句子

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，由於您沒有稱爲表單的表單，因此無法工作。一旦這些被清理，代碼工作確定：

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

您還需要更改按鈕的名稱。