字符串連接錯誤

我有一個HTML表單字符串連接錯誤

<form action="" method="post" enctype="multipart/form-data"> 
    <p> 
     Banner Ad Name :<br /> 
     <input type="text" name="bannerAdName" id="bannerAdName" /> 
    </p> 
    <p> 
     Your web page :<br /> 
     <input type="text" name="bannerAdWeb" id="bannerAdWeb" /> 
    </p> 
    <p> 
     Ad image :<br /> 
     <input type="file" name="bannerAdImage" id="bannerAdImage"/> 
    </p> 
    <p> 
     Title :<br /> 
     <input type="text" name="bannerAdTitle" id="bannerAdTitle" /> 
    </p> 
    <p> 
     Description :<br /> 
     <textarea name="bannerAdDesc" id="bannerAdDesc" ></textarea> 
    </p> 
    <div id="button"><input type="button" value="VIEW" onclick="return upload()"/></div> 

    <input type="hidden" value="POST" /> 
</form>

而且一個Javascript

<div id="banAdT"> 

            <script> 
         document.getElementById("bannerAdWeb").onchange = function() { 
         document.getElementById("banAdT").innerHTML = '<a href="'+this.value+'">'; 
         } 
        </script> 

        <script> 
         document.getElementById("bannerAdTitle").onchange = function() { 
         var u = this.value; 
         document.getElementById("banAdT").innerHTML += u; 
         document.getElementById("banAdT").innerHTML += '</a>'; 
         alert(document.getElementById("banAdT").innerHTML); 
         } 
        </script> 
    </div>

我期待的警報顯示類似<a href="someurl">Some Title</a>。但相反，它顯示<a href="someurl"></a>Some Title！請help..I找不到在哪裏我做了錯誤的

來源

2011-08-11 Nitish

哪裏是一個ID'banAdT'元素？ – shinkou

@Nitish你能編輯你的問題嗎？它沒有任何意義：「我期待警報顯示Some Title之類的東西，但它會顯示某些標題」 –

@Nitish我意識到問題是您沒有正確格式化您的問題。您必須使用正確的代碼塊格式，以便HTML代碼可見。現在已經修好了。 –

嘗試這樣：

  <script> 
       document.getElementById("bannerAdWeb").onchange = function() { 
       document.getElementById("banAdT").innerHTML = '<a id="bandAdTLink" href="'+this.value+'"></a>'; 
       } 
      </script> 

      <script> 
       document.getElementById("bannerAdTitle").onchange = function() { 
       var u = this.value; 
       document.getElementById("bandAdTLink").innerHTML += u; 
       alert(document.getElementById("banAdT").innerHTML); 
       } 
      </script>

解決方案的解釋：你永遠不應該通過JavaScript插入無效的HTML到DOM。

來源

2011-08-11 05:44:35

非常感謝Felipe。有效 – Nitish

-1

有問題的代碼是這樣的：

document.getElementById("banAdT").innerHTML += u; 
document.getElementById("banAdT").innerHTML += '</a>';

這些應該是document.getElementById("bannerAdTitle").value。

來源

2011-08-11 05:37:07

輸入元素沒有innerHTML。 – shinkou

@shinkou這是Nitish發佈的原始代碼。我指出他使用的元素ID是錯誤的。當然，你的代碼有第二個問題是正確的。我已更新我的回答以反映您的評論，謝謝 –

您不能將無效位的HTML放入DOM中，並期望它們保持不變。瀏覽器將錯誤更正，例如

document.getElementById("banAdT").innerHTML = '<a href="'+this.value+'">';

這將通過瀏覽器糾正一個空的A元素。

var u = this.value; 
document.getElementById("banAdT").innerHTML += u;

這可能會在A元素後附加一個u字符。

document.getElementById("banAdT").innerHTML += '</a>';

不知道瀏覽器會做出如此，它是從字面上創造：

<a href="..."></a>u</a>

所以無論發生什麼事情是依賴於瀏覽器。

使用DOM方法，不要亂用innerHTML和字符串處理非平凡的東西。例如。創建像A元素：

var a = document.createElement('a'); 
a.href = this.value;

後來

a.appendChild(document.createTextNode('u'));

再追加一個元素是這樣的：

document.getElementById("banAdT").apppendChild(a);

來源

2011-08-11 05:50:24 RobG

字符串連接錯誤

回答

相關問題