Изменение содержимого HTML с помощью функции Javascript

Question

Может кто-нибудь скажет мне, где я ошибся с этим кодом? Ничего не происходит, когда я нажимаю ссылку. Во-первых у меня есть PHP био пользователя с ссылкой ниже, чтобы изменить его (имейте в виду, этот скрипт находится во внешнем файле, который включен в основной) ...

<?php 

/* bio was retrieved earlier... */ 

echo '<div id="bio"> 
<p>'.$row["bio"].'<br> 
<a href="javascript:editBio(\''.$row["bio"].'\');">Edit</a></p> 
</div>'; 

?> 

Тогда у меня есть яваскрипта функцию в основной файл, который я хочу, чтобы заменить DIV с формой ...

function editBio(bio) { 

    document.getElementById("bio").innerHTML = ' 
    <form action="profile.editbio.php" method="post"> 
    <textarea cols="40" rows="10" name="bio" id="bio" maxlength="275">'+ bio +'</textarea><br> 
    <input type="submit" value="Update"></form> 
    '; 

} 

То, что я хочу, чтобы пользователю нажать на ссылку «редактировать» и иметь их био мгновенно превратится в текстовое поле, где они могут изменить его ,

При проверке консоли я получил эту ошибку:

Uncaught SyntaxError: Unexpected end of input 

Любой помощь ценится, и если вы можете обеспечить более короткими, менее сложный код (хотя я не думаю, что вы могли бы), что было бы здорово!

Answer 1

Я уверен, что это из-за разрыва строки в вашем HTML: если линия падает, это нарушение к следующей строке, а не переполнены.

Он должен выглядеть следующим образом:

document.getElementById("bio").innerHTML = '<form action="profile.editbio.php" method="post"><textarea cols="40" rows="10" name="bio" id="bio" maxlength="275">'+ bio +'</textarea><br><input type="submit" value="Update"></form>'; 

Скобки не несут через разрывы строк.

Кроме того, как уже упоминалось jsickles, эта линия будет выдавать ошибку:

<a href="javascript:editBio('.$row["bio"].');">Edit</a> 

Вам нужно бежать внутренние скобки:

<a href="javascript:editBio('.$row[\'bio\'].');">Edit</a> 

Demo

Answer 2

новые значения строки должны быть объединены, например:

function editBio(bio) { 

    document.getElementById("bio").innerHTML = '<form action="profile.editbio.php" method="post">' 
               +'<textarea cols="40" rows="10" name="bio" id="bio" maxlength="275">'+ bio +'</textarea><br>' 
               +'<input type="submit" value="Update"></form>'; 

} 

Answer 3

Не был бы этот код ...

javascript:editBio('.$row["bio"].'); 

нужно мне в 'а' OnClick событие, а не HREF atrribute?

например.

<a href="javascript:editBio('.$row["bio"].');">Edit</a> 

должен быть

<a href="" onclick="editBio('.$row["bio"].');">Edit</a> 

Answer 4

Самая большая проблема что вы не используете кавычки вокруг параметра вызова функции.

<a href="javascript:editBio(\''.$row["bio"].'\');">Edit</a>