Question

我正在制作优惠券代码页，我对一件事感到震惊，也许这对于javascript好友来说很容易。问题是

所有输出链接都在一行中，我希望每个链接位于不同的文本区域，并且能够从textarea中复制

HTML标记

   <p>Enter your email or User ID 
       <input type="text" name="foo" id="foosite" value="" />
   </p>

  <a href="#" id='link' target="_blank">send</a>
  <div id="url_value"></div>

Javscript代码

var a = document.getElementById('link')
a.onclick = function(e){
    e.preventDefault();
    var value = document.getElementById('foosite').value;
    var route = "http://www.domain.com/route.php?email=" + value + ',  ';
    var data = "http://www.domain.com/data.php?email=" + value + ',  ';
    var form = "http://www.domain.com/form.php?email=" + value;

    document.getElementById('url_value').innerHTML = route + data + form
}

从上面的代码中，它生成一行中的所有链接并且看起来很难看，我需要它在3个不同的textareas中显示。

喜欢这个Html

<p>Link 1</p>
<textarea name="route"> Output Link</textarea> 

<p>Link 2</p>
<textarea name="data"> Output Link</textarea> 

<p>Link 3</p>
<textarea name="form"> Output Link</textarea>

Answer 1

您的代码存在以下问题：

document.getElementById('url_value').innerHTML = route + data + form;

您正在做的是将所有链接作为一行注入DOM，并且它们之间没有空格。

解决方案是查看结果，然后将它们注入DOM，如下所示：

var a = document.getElementById('link')

a.onclick = function(e){
    e.preventDefault();

    var value = document.getElementById('foosite').value;
    var routeLink = "http://www.domain.com/route.php?email=" + value + ',  ';
    var dataLink = "http://www.domain.com/data.php?email=" + value + ',  ';
    var formLink = "http://www.domain.com/form.php?email=" + value;

    var routeView = '<p>Link 1</p><textarea name="route">'+routeLink+'</textarea>';
    var dataView = '<p>Link 2</p><textarea name="data">'+dataLink+'</textarea>';
    var formView = '<p>Link 3</p><textarea name="form">'+formLink+'</textarea>';

    document.getElementById('url_value').innerHTML = routeView + dataView + formView;
}

<强>更新

如果HTML已存在，请在您的textarea字段中添加ID。

<p>Link 1</p>
<textarea id="routeValue" name="route"> Output Link</textarea> 

<p>Link 2</p>
<textarea id="dataValue" name="data"> Output Link</textarea> 

<p>Link 3</p>
<textarea id="formValue" name="form"> Output Link</textarea>

用以下代码替换你的JS：

var a = document.getElementById('link')

a.onclick = function(e){
    e.preventDefault();

    var value = document.getElementById('foosite').value;
    var routeLink = "http://www.domain.com/route.php?email=" + value + ',  ';
    var dataLink = "http://www.domain.com/data.php?email=" + value + ',  ';
    var formLink = "http://www.domain.com/form.php?email=" + value;

    document.getElementById('routeValue').innerHTML = routeLink;
    document.getElementById('dataValue').innerHTML = dataLink;
    document.getElementById('formValue').innerHTML = formLink;
}

输入填充textarea - Javascript

1 个答案: