Ошибка конкатенации строк

Question

У меня есть форма 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!Пожалуйста, помогите .. Я не могу найти, где я сделал не так

Answer 1

Попробуйте что-то вроде этого:

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

Объяснение решения : вы никогда не должны вставлять неверный HTML в DOM через javascript.

Answer 2

Вы не можете поместить недопустимые биты HTML в DOM и ожидать, что они останутся. Браузер исправит ошибку, например

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

Это будет исправление ошибки браузером в пустой элемент A.

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

Это, вероятно, добавит символ u после элемента A.

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'));

Затем добавьте элемент a, например:

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

Answer 3

Код проблемы:

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

Это должно быть document.getElementById("bannerAdTitle").value.