簡單的JavaScript字符串變量返回「undefined」

Question

我基本上試圖用用戶輸入創建一個url友好的查詢字符串。這些變量替換空格和@並將它們全部加在一起，然後函數應該在段落中顯示URL。這讓我感到非常愚蠢，因爲我知道這很簡單，我搞砸了。請指出我的錯誤。作爲一個方面說明，是否有更好的方法來做所有這些替換而沒有所有變量？

以下代碼應返回類似於以下的字符串： https://www.somewebsite.com/formhandler.php？ & FNAME =戈迪&地址= 123 +主+街道&電子郵件=東西％40somewhere.com

<SCRIPT TYPE="TEXT/JAVASCRIPT"> 

var fnstr = document.getElementById("firstname").value; 
var fncutspace = fnstr.trim(); 
var fnrepspace = fncutspace.replace(/ /g,"+"); 
var fnfinal = fnrepspace.replace("@","%40"); 
var adstr = document.getElementById("address").value; 
var adcutspace = adstr.trim(); 
var adrepspace = adcutspace.replace(/ /g,"+"); 
var adfinal = adrepspace.replace("@","%40"); 
var emstr = emdocument.getElementById("firstname").value; 
var emcutspace = emstr.trim(); 
var emrepspace = emcutspace.replace(/ /g,"+"); 
var emfinal = emrepspace.replace("@","%40"); 
var domurl = "https://www.somewebsite.com/formhandler.php?&fname="; 
var secondchunk = "&address="; 
var thirdchunk = "&email="; 
var url = domurl + fnfinal + secondchunk + adfinal + thirdchunk + emfinal; 

function createurl() { 
document.getElementById("demo").innerHTML = url; 
} 
</SCRIPT> 

<FORM action="javascript:createurl()"> 
Fisrt Name:<INPUT id="firstname" TYPE="TEXT"><br> 
street address:<INPUT id="address" TYPE="TEXT"><br> 
email address:<INPUT id="email" TYPE="TEXT"><br> 
<input type="submit" value="GO"> 
</FORM> 

<p id="demo"></p> 

Answer 1

如果它應該是基於用戶的輸入，你應該移動的變量聲明，並設置內部createurl：

function createurl() { 
    var fnstr = document.getElementById("firstname").value; 
    var fncutspace = fnstr.trim(); 
    var fnrepspace = fncutspace.replace(/ /g,"+"); 
    var fnfinal = fnrepspace.replace("@","%40"); 
    // etc. 
    var url = domurl + fnfinal + secondchunk + adfinal + thirdchunk + emfinal; 

    document.getElementById("demo").innerHTML = url; 
} 

他們將被設置爲當前的輸入值，這樣，在函數被調用時。

作爲一個方面說明，是否有更好的方法來做所有這些替換沒有所有的變量？

您可以鏈中的方法調用：

var fnInput = document.getElementById('firstname'); 
var fnfinal = fnInput.value.trim().replace(/ /g,"+").replace("@","%40"); 

Answer 2

你可能只是想使用內置的JavaScript函數encodeURI，encodeURIComponent，或escape酌情：http://www.w3schools.com/jsref/jsref_encodeuri.asp

Answer 3

你應該使用encodeURIComponent(string)而不是你現在正在做的修剪/替換。

Answer 4

<FORM action="javascript:createurl()"> 
Fisrt Name:<INPUT id="firstname" TYPE="TEXT"><br> 
street address:<INPUT id="address" TYPE="TEXT"><br> 
email address:<INPUT id="email" TYPE="TEXT"><br> 
<input type="submit" value="GO"> 
</FORM> 

<p id="demo"></p> 

<SCRIPT TYPE="TEXT/JAVASCRIPT"> 

var fnstr = document.getElementById("firstname").value; 
var fncutspace = fnstr.trim(); 
var fnrepspace = fncutspace.replace(/ /g,"+"); 
var fnfinal = fnrepspace.replace("@","%40"); 
var adstr = document.getElementById("address").value; 
var adcutspace = adstr.trim(); 
var adrepspace = adcutspace.replace(/ /g,"+"); 
var adfinal = adrepspace.replace("@","%40"); 
var emstr = emdocument.getElementById("firstname").value; 
var emcutspace = emstr.trim(); 
var emrepspace = emcutspace.replace(/ /g,"+"); 
var emfinal = emrepspace.replace("@","%40"); 
var domurl = "https://www.somewebsite.com/formhandler.php?&fname="; 
var secondchunk = "&address="; 
var thirdchunk = "&email="; 
var url = domurl + fnfinal + secondchunk + adfinal + thirdchunk + emfinal; 

function createurl() { 
document.getElementById("demo").innerHTML = url; 
} 
</SCRIPT> 

您應該在window.onload回調函數中執行所有依賴於DOM的javascript函數。

window.onload = function() 
{ 
Javascript code goes here 
}