次のような Javascript 関数を含む Django テンプレートがあります。
<a class ="edit" href="{% url notecards.views.edit_notecard notecard.id %}"> Edit </a>
<h3 class="notecard"><p id="boldStuff">{{ notecard.notecard_name }}</p></h3>
<input id ="myButton" type="button" onclick="changeText()" value="View Answer"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
function changeText(){
if (document.getElementById("boldStuff").textContent == "{{ notecard.notecard_name }}")
{
document.getElementById("boldStuff").textContent = "{{ notecard.notecard_html|safe }}";
$("#myButton").prop("value", "View Question");
}
else
{
document.getElementById("boldStuff").textContent = "{{ notecard.notecard_name }}";
$("#myButton").prop("value", "View Answer");
}
}
</script>
このスクリプトは、変数値が HTML でない場合に完全に機能します。ただし、HTML 値の場合、関数はまったく機能しません。ボタンをクリックしても何も起こりません。コンソールでは、次のようになります。
undetermined string literalJavascript関数の4行目でchangeText、1行目の関数宣言行で定義されていません。
関数のページ ソースは、問題のある値の 1 つに対して次のようになります。
function changeText(){
if (document.getElementById("boldStuff").textContent == "Here is a question hey whats up?")
{
document.getElementById("boldStuff").textContent = "<p>Here is an answer hey whats up. </p>
<p>Here is an answer hey whats up. Here is an answer hey whats up. </p>
<p>Here is an answer hey whats up.</p>
<p>Here is an answer hey whats up.Here is an answer hey whats up.vHere is an answer hey whats up. v</p>";
$("#myButton").prop("value", "View Question");
}
else
{
document.getElementById("boldStuff").textContent = "Here is a question hey whats up?";
$("#myButton").prop("value", "View Answer");
}
}
値には次のものがあります。
表示されているタグ、リスト項目など。
と の両方.textContentを使用してみ.innerHTMLましたが、問題は同じです。
ありがとうございました