字符串连接错误

我有一个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

字符串连接错误

回答

相关问题