I have HTML a h2 with id of "containerTitle" like this:
<h2 id = "containerTitle"> Container Placeholder</h2>
and in my JavaScript I am trying to replace the text associated with this id like this:
document.getElementById("containerTitle").innerHTML = "NewText";
however, it breaks. When I look at the source of the new HTML in browser, the line that I wrote with getElementById is changed to this:
<h2 id = "containerTitle"> Container Placeholder</h2>
and it breaks my JavaScript. Why would this line replace my JavaScript with the HTML? Getting the element by ID has been working for everything else. Please help! I'm primarily a C# programmer, but am helping with an HTML project.
<html>
<head>
<title> Case Scenario</title>
<style>
table tr td
{
border:1px solid #222;
padding: 0.5em;
padding-top: 0;
}
table
{
border-spacing: 0;
border-collapse: collapse;
}
body
{
background-color: rgb(250, 250, 250);
font-family: Georgia, Charcoal, serif;
font-size: 16px;
}
img
{
display: inline;
}
</style>
</head>
<body>
<h1 id = "caseTitle"> Case Scenario 1</h1>
<h2 id = "containerTitle"> Container Placeholder</h2>
<div style="border-right:1px solid #222; float:left; display:inline-
block; width:45%; overflow-y:scroll; max-height:600px; padding:1%">
<div id="caseS" style="display:inline-block; vertical-align:top;
margin-left:1%; margin-top:1%"></div>
<img id="imgS" src="" style="">
<table id="tableS" style="margin-left:10%; margin-bottom:2%;
text-align:center">
<p id="containerDescription"> Container Description placeholder</p>
</table>
</div>
<div style="margin-left:4px; display:inline-block; max-width:50%; overflow-y:scroll; max-height:600px; padding:1%;">
<div id="runningCount">Score: 0</div>
<h2 id="titleQ">Question 1</h2>
<div id="askingQ"></div>
<br>
<form id="formQ">
</form>
<input type="button" onClick="testQ()" value="Check Answer" id="checkQ">
<br>
<b id="alertQ" style="margin-top:0; padding-top:0; width:30%"></b>
</div>
<br>
<br>
<script type="text/javascript">
var CaseCount = 0;
var CaseContainerCount = 0;
var CaseContainerQuestionCount = 0;
var CaseContainerAnswerCount = 0;
var QuestionCount = 1;
var currentAnswerCollection = "Case" + CaseCount + "Container" + CaseContainerCount + "Question" + CaseContainerQuestionCount + "Answers";
var newHTML = "";
var radioArray = new Array();
var answerCount = 0;
var checkedAnswerCount = 0;
//document.write(currentAnswerCollection.length);
setup();
function setup()
{
for(var j = 0; j < AnswersArray[0].length; j++)
{
newHTML += "<span id=\"a_a"+ j + "\"></span><input type=\"radio\" name=\"grouping\" id=\"a" + j + "0\" value=\"" + j + "\"><span onclick=\"easyRadio('a" + j + "')\" ontouchstart\"easyRadio('a" + j + "')\">" + AnswersArray[answerCount][j].answerText + "</span><br><br>";
}
//}
//document.getElementById("askingQ").innerHTML = Case0Container0Questions[0];
document.getElementById("askingQ").innerHTML = QuestionsArray[CaseContainerCount][CaseContainerQuestionCount];
document.getElementById("formQ").innerHTML = newHTML;
//answerCount++;
//document.write(AnswersArray[0][0].answerText);
}
function testQ()
{
radioArray = document.getElementsByName("grouping");
for(var i = 0; i < radioArray.length; i++)
{
//document.write(i);
if(radioArray[i].checked)
{
if(AnswersArray[answerCount][i].isCorrect == "True")
{
document.getElementById("a_a" + i).innerHTML = "<img src='img/right.png' class='mark'>";
checkedAnswerCount++;
MarkRightAnswer();
break;
}
else
{
if(checkedAnswerCount < (radioArray.length - 2))
{
document.getElementById("a_a" + i).innerHTML = "<img src='img/wrong.png' class='mark'>";
//console.log(checkedAnswerCount);
checkedAnswerCount++;
}
else
{
document.getElementById("a_a" + i).innerHTML = "<img src='img/wrong.png' class='mark'>";
MarkRightAnswer();
}
break;
}
}
}
}
function MarkRightAnswer()
{
checkedAnswerCount = 0;
for(var i = 0; i < AnswersArray[answerCount].length; i++)
{
if(AnswersArray[answerCount][i].isCorrect == "True")
{
document.getElementById("a_a" + i).innerHTML = "<img src='img/right.png' class='mark'>";
//change button for next question
document.getElementById("checkQ").setAttribute("value","Next!");
document.getElementById("checkQ").setAttribute("onclick","NextQuestion()");
}
}
}
function NextQuestion()
{
CaseContainerQuestionCount++;
answerCount++;
QuestionCount++;
newHTML = "";
for(var j = 0; j < AnswersArray[0].length; j++)
{
newHTML += "<span id=\"a_a"+ j + "\"></span><input type=\"radio\" name=\"grouping\" id=\"a" + j + "0\" value=\"" + j + "\"><span onclick=\"easyRadio('a" + j + "')\" ontouchstart\"easyRadio('a" + j + "')\">" + AnswersArray[answerCount][j].answerText + "</span><br><br>";
}
//check length of containerQuestion array. If at end of array, go to next container
if(CaseContainerQuestionCount >= QuestionsArray[CaseContainerCount].length)
{
CaseContainerCount++;
CaseContainerQuestionCount = 0;
console.log( QuestionsArray[CaseContainerCount].length);
}
document.getElementById("containerTitle").innerHTML = "BOOOOOYAAA";
document.getElementById("askingQ").innerHTML = QuestionsArray[CaseContainerCount][CaseContainerQuestionCount];
document.getElementById("formQ").innerHTML = newHTML;
document.getElementById("titleQ").innerHTML = "Question " + QuestionCount;
document.getElementById("checkQ").setAttribute("value","Check Answer");
document.getElementById("checkQ").setAttribute("onclick","testQ()");
}
</script>
答案 0 :(得分：1)
There will be duplication.
Please check that you are using the 'containerTitle' id anywhere in the page. If you are using same id for multiple DOMs it wont work