个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有HTML id 为“containerTitle”的 h2，如下所示:
<h2 id = "containerTitle"> Container Placeholder</h2>
在我的 JavaScript 中，我尝试替换与此 id 关联的文本，如下所示:
document.getElementById("containerTitle").innerHTML = "NewText";
但是，它坏了。当我在浏览器中查看新 HTML 的源代码时，我用 getElementById 编写的行改为:
<h2 id = "containerTitle"> Container Placeholder</h2>
它破坏了我的 JavaScript。为什么这一行要用 HTML 替换我的 JavaScript？通过 ID 获取元素对于其他一切都有效。请帮忙!我主要是一名 C# 程序员，但正在帮助处理一个 HTML 项目。
<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>
最佳答案
会有重复。
请检查您是否在页面中的任何位置使用“containerTitle”ID。如果你对多个 DOM 使用相同的 id，它将不起作用
关于javascript - document.getElementByID 正在用 html 代码替换 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36408533/
24
4
0
我有不同的 div，每个 div 都有一个调用相同函数的按钮。 . . . INIT . . . INIT 棘手的部分是每个按钮应该只对自己的 div 执行函数(#btn1 到 #div1、#
XSP.getElementById 和 document.getElementById 之间有什么区别？在我的测试中，两者似乎都返回相同的值(存储在字段中的值)。为 XPage 编码时应首选哪一个？
我通常会通过以下方式为某些事件注册 javascript 函数: myBtn.Attributes.Add("onClick", "Validate(getElementById('"+txtFirs
当我想检查页面中是否存在某个元素时。这两个检查是一样的吗？有没有更好更紧凑的方法来检查是否存在？ 如果我想检查 value == '' 该怎么办。这也可以包含在这张支票中吗？ 最佳答案 对元素的引用永
我尝试将新值分配给输入表单的隐藏输入和复选框。它在 Firefox 中工作正常，但在 IE 中则不然(我使用的是 IE 7)。有谁知道我的代码有什么问题吗？ HTML: Javascript: v
我真的不知道如何描述我的问题，但基本上: 为了好玩，我在 JSFiddle 中编写了一个元素，不知何故我的代码输出只是上下跳动。 如果您想亲自查看，请单击下面的链接，然后单击“提交投诉”按钮。 问题是
document.getElementById("test").value document.getElementById("test").innerHTML 第一个表示地址，第二个表示存储在该地址的
在将 html block 插入 dom 之前，我对在 dom 外构建 html block 很感兴趣，因此我使用 dynatrace 进行了一些测试。我使用了bobince的方法: Is there
我在 GWT 应用程序中使用 native 函数，我尝试了这两种方法: document.getElementById("id") 返回 null 但 $doc.getElementById() 返回
以下代码有什么区别: Hover Over me SomeLink1 SomeLink2 SomeLink3
我正在尝试使用 javascript 设置 div 的内部 html，但由于某种原因，它不起作用。我发现其他人以前也遇到过这个问题，但我在其他帖子中找到的解决方案均无效。我不明白怎么了。 这是我的测试
编辑:我修复了分号、区分大小写以及方括号。如果我删除 buttonPARTICULAR 之后的函数，代码就可以工作!为什么？ 编辑:固定。我是个笨蛋。对不起!!! :-Z 当我保持简单时，就像这样，一
很难说出这里问的是什么。这个问题是模棱两可的、模糊的、不完整的、过于宽泛的或修辞的，无法以目前的形式得到合理的回答。如需帮助澄清这个问题以便重新打开它，visit the help center .
我正在尝试创建一个通用的 JavaScript 函数来更改事件的属性。 它的工作方式是 function fooFunction(sourceElement) { var newName =
我需要获取元素的 ID，但该值是动态的，只有它的开头始终相同。 这是一段代码。 ID 总是以 poll- 开头，然后数字是动态的。 如何只使用 JavaScript 而不是 jQuery 获取 ID
我需要使用 VBA 从 HTML 中提取某些信息。 这是我试图单独提取位置信息的 HTML。 Location Dallas/Fort Worth Area Industry
我正在制作一个程序，该程序从输入字段返回值，然后根据条件将字段字符串更改为 x 结果。非常感谢您的帮助，因为这里的成员过去一直给我很大帮助。调试器抛出此错误，当然没有任何效果: script.js:2
我不确定为什么这不起作用，有人可以告诉我为什么吗？ var red = [0, 100, 63]; var orange = [40, 100, 60]; var green = [75, 100,
这个问题已经有答案了: Javascript Shorthand for getElementById (24 个回答) 已关闭 8 年前。 我的下面的代码工作正常，但我想知道，是否有任何仅通过 Ja
我有这个simple HTML 标记: //a reserved property name id //same here 但是——运行: alert(document.getEle
我是一名优秀的程序员,十分优秀！