ввода для заполнения - текстовое поле Javascript

Question

творю страницу код купона и я ударил в одном, Может быть, его легко Javascript buddies.The проблема заключается в

• Все выходные звенья в одной строке, я хочу каждое звено в другой текстовой области и в состоянии скопировать из текстового поля

HTML Markup

<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-х различных прокручиваемым.

Как это 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; 
} 

---

UPDATE:

Если HTML уже существует , добавьте идентификаторы в поля textarea.

<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; 
}