JavaScript錯誤地解析HTML輸入值

我正在創建一個HTML頁面，我想讓它使得用戶在文本框中鍵入的內容都會在手動更新的URL中進行。JavaScript錯誤地解析HTML輸入值

這裏是我的src ..

<HTML> 
<head> 
    <title> 
     Signature Creator 
    </title> 
</head> 

<body id="body"> 
    <br> 
    <!--<meta http-equiv="refresh" content="1">--> 
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="title" name="JacobSignatureCreatorTitle" placeholder="Title" width="10px"><br><br> 
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="subtitle" name="JacobSignatureCreatorSubTitle" placeholder="Subtitle" width="10px"><br><br> 
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="line1" name="JacobSignatureCreatorLineOne" placeholder="Line #1" width="10px"><br><br> 
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="line2" name="JacobSignatureCreatorLineTwo" placeholder="Line #2" width="10px"><br><br> 
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="line3" name="JacobSignatureCreatorLineThree" placeholder="Line #3" width="10px"><br><br> 
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="submit" onclick="getVariables()" value="Get 'err done!"><br><br> 
    <br><br><br><br><br><br><center> 
     <img id="photo"> 
    </center> 
    <script> 
     function getVariables() { 
      if (document.getElementById("title").value == null) { 
       var title = ""; 
      } else { 
       var title = document.getElementById("title").value.toString; 
      } 
      if (document.getElementsByName('subtitle').value == null) { 
       var subtitle = ""; 
      } else { 
       var subtitle = document.getElementsByName('subtitle').value.toString; 
      } 
      var line1 = document.getElementsByName('line1').value; 
      var line2 = document.getElementsByName('line2').value; 
      var line3 = document.getElementsByName('line3').value; 
      drawIframe(); 
     } 

     function drawIframe() { 
      document.getElementById("photo").src = "http://sig.bensdaman.com/v2/image.png?title=" + title + "&sub=" + subtitle + "&line1=" + line1 + "&line2=" + line2 + "&line3=" + line3; 
     } 
    </script>

所有我從URL取回是這個..

http://sig.bensdaman.com/v2/image.png?title=[object HTMLInputElement]&sub=[object HTMLInputElement]&line1=[object HTMLInputElement]&line2=[object HTMLInputElement]&line3=[object HTMLInputElement]

來源

2015-10-07 JacobRocks12

'toString'是一種方法。你應該像這樣使用'toString（）'。 'toString'在這裏不是必需的，'document.getElementById（「title」）.value'本身會產生你的價值。 – Kesavan

你有什麼錯誤？至於我現在發現的是你試圖從'drawIframe（）'方法訪問'getVariables（）'方法中聲明的局部變量。 – Kesavan

@Kesavan我試過這個像document.getElementById（「title」）。toString（），它的工作。 – JacobRocks12

的問題是變量的範圍，他們是本地的到getVariables()。在drawIframe中，當您訪問像title這樣的變量時，它並不是指在getVariables()中創建的變量，而是指的是窗口對象的屬性，元素的id將可作爲窗口對象的屬性訪問（即像全局變量一樣）所以當您在drawIframe中說subtitle時，它指的是具有編號爲drawIframe的dom元素，其toString()返回[object HTMLElementInput]。

所以你只需要把這個變量作爲參數傳遞給drawIframe像

function getVariables() { 
    var title = document.getElementById("title").value; 
    var subtitle = document.getElementById('subtitle').value; 
    var line1 = document.getElementsByName('line1').value; 
    var line2 = document.getElementsByName('line2').value; 
    var line3 = document.getElementsByName('line3').value; 
    drawIframe(title, subtitle, line1, line2, line3); 
} 

function drawIframe(title, subtitle, line1, line2, line3) { 
    document.getElementById("photo").src = "http://sig.bensdaman.com/v2/image.png?title=" + title + "&sub=" + subtitle + "&line1=" + line1 + "&line2=" + line2 + "&line3=" + line3; 
}

來源

2015-10-07 05:13:57

非常感謝！有用！ – JacobRocks12

JavaScript錯誤地解析HTML輸入值

回答

相關問題