Javascript:无法访问另一个脚本中添加的div
我正在尝试使用Django编写一个在线编译器。我使用插件将数字行添加到我的Javascript:无法访问另一个脚本中添加的div,javascript,Javascript,我正在尝试使用Django编写一个在线编译器。我使用插件将数字行添加到我的textarea，这样它看起来更像我的文本编辑器 该插件将divs添加为行号，还可以通过向div添加lineselectclass来突出显示行号。所以我决定使用这个特性来突出显示遇到编译错误的行号 问题在于，当用户滚动textarea时，插件会动态添加divs。我无法突出显示当前显示的行号。在突出显示行号之前，我尝试向下滚动到底部，但没有成功 我的剧本快结束了。我也无法将脚本移动到单独的.js文件中，因为在这种情况下，它无
textareadivdivlineselecttextareadiv.js<!DOCTYPE html>
<html>
<head>
{% load static from staticfiles %}
<link href = {% static "styles/recompile_style.css" %} type = "text/css" rel = "stylesheet" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src = {% static "scripts/jquery-linedtextarea.js" %}></script> <!-- plugin itself -->
<script src = {% static "scripts/tabIndent.js" %}></script> <!-- plugin for inserting tab character when pressing tab -->
<title>OCD</title>
</head>
<body>
<div id = "left-column-div">
<div id = "compile-div">
<form id = "compile" name = "Compile" action = "/comp_old/" method = "post">
{% csrf_token %}
<label for = "c">C</label>
<input type = "radio" name = "language" value = "c" {% if language == "c" %}checked{% endif %}></br>
<label for = "c++">C++</label>
<input type = "radio" name = "language" value = "c++" {% if language == "c++" %}checked{% endif %}></br>
<label>Source Code:</label></br>
<!-- this text area is where i try to highlight (id = "code") -->
<textarea rows = "15" cols = "70" class = "lined" id = "code" name = "code" placeholder = "Your code">{{ code }}</textarea></br></br>
<!-- ........................................................ -->
<label>Input File:</label></br>
<textarea rows = "15" cols = "70" class = "lined" name = "inp" placeholder = "Your input (if needed)">{{ inp }}</textarea></br>
<label>Flags:</label></br>
<input type = "text" size = "50" name = "flags" placeholder = "Flags for compiler (if needed)" value = {{ flags }}></br>
<button id = "compile-button" class = "subm-button" name = "recompile" type = "submit" style = "float: left">Recompile</button>
{% if run_access %}
<button id = "compile-button" class = "subm-button" name = "run" type = "submit" style = "float: left">Run</button>
{% endif %}<p style = "float: left;margin: 0px 5px 0px 5px"> or </p>
<input type = "button" class = "subm-button" id = "open-file" name = "open-file" value = "Open file" style = "float: left"><input type = "file" id = "code_file"><br><br>
<script>
function readSingleFile(e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
displayContents(contents);
};
reader.readAsText(file);
}
function displayContents(contents) {
var element = document.getElementById('code');
element.innerHTML = contents;
}
var button = document.getElementById ("open-file");
if (button)
{
button.onclick = function()
{
var element = document.getElementById ("code_file");
if (element)
{
element.addEventListener ("change", readSingleFile, false);
element.click();
}
}
}
</script>
</form>
{% if no_language_error %}
<p>Please select language</p>
{% endif %}
{% if no_code_error %}
<p>Please write code</p>
{% endif %}
</div>
</div>
<script>
tabIndent.renderAll();
</script>
<script>
$(function() {
$(".lined").linedtextarea(
{selectedClass: 'lineselect'}
);
});
</script>
<div id = "right-column-div">
<div id = "escape-div">
{% if response %}
<textarea id = "output-text" rows = "15" cols = "60" name = "response" readonly = "">{{ response }}</textarea>
{% if debug_access %}
<form id = "debug" name = "DebugButton" action = "/comp_debug/" method = "post">
{% csrf_token %}
<button name = "debug" type = "submit">Debug</button>
</form>
{% endif %}
<script>
/*my script where i try to highlight according to line numbers given by compiler errors*/
$(document).ready (function() {
var errText = document.getElementById ("output-text");
if (errText != null)
{
var reset = document.getElementsByClassName ("lineno lineselect");
for (var i = 0; i < reset.length; ++i)
{
reset[i].className = "lineno";
}
var errors = errText.innerHTML;
var indices = [];
var pos = 0;
var next = -1;
while (pos != -1) {
pos = errors.indexOf ("Position", next + 1);
if (pos != -1)
{
indices.push (pos);
}
next = pos;
}
var nlines = [];
for (var i = 0; i < indices.length; ++i)
{
var index = indices[i];
for (var j = indices[i]; errors.charAt (j) != ":"; ++j)
{
++index;
}
index += 2;
var nline = "";
for (var j = index; errors.charAt (j) != "/"; ++j)
{
nline += errors.charAt (j);
}
nlines.push (nline);
}
/* nlines is an array of number lines, i try to highlight here by assigning lineselect class */
for (var i = 0; i < nlines.length; ++i)
{
var obj = document.getElementById ("code");
if (obj)
{
obj.scrollTop = 99999; /* tried to scroll to bottom before highlighting */
var temp = document.getElementById (nlines[i]); /* doesn't see elements below 16 lines */
if (temp)
{
console.log (temp);
if (obj)
{
temp.className = "lineno lineselect";
}
}
}
}
}
});
</script>
{% endif %}
{% if no_language_error %}
<p>Please select language</p>
{% endif %}
{% if no_code_error %}
<p>Please write code</p>
{% endif %}
<form id = "return-to-files" name = "ReturnToFiles" action = "/comp_files/" method = "post">
{% csrf_token %}
<button class = "subm-button" id = "return" name = "return" type = "submit">Return to files</button>
</form>
<br><br>
<form id = "logout-button" name = "LogoutButton" action = "/comp_logout/" method = "post">
{% csrf_token %}
<p>Or</p><button id = "signup_button" class = "subm-button" name = "logout" type = "submit">Logout</button>
</form>
</div>
</div>
</body>
</html>
{%load static from staticfiles%}
强迫症
{%csrf_令牌%}
C
C++
源代码：
{{code}}
输入文件：
{{inp}}
旗帜：
重新编译
{%if run_access%}
跑
{%endif%}或
函数readSingleFile（e）{
var file=e.target.files[0]；
如果（！文件）{
返回；
}
var reader=new FileReader（）；
reader.onload=函数（e）{
var内容=e.target.result；
显示内容（contents）；
};
reader.readAsText（文件）；
}
函数displayContents（目录）{
var元素=document.getElementById（'code'）；
element.innerHTML=内容；
}
var button=document.getElementById（“打开文件”）；
如果（按钮）
{
button.onclick=函数（）
{
var element=document.getElementById（“代码文件”）；
if（元素）
{
element.addEventListener（“更改”，readSingleFile，false）；
元素。单击（）；
}
}
}
{%如果没有语言错误%}
请选择语言
{%endif%}
{%如果没有\u代码\u错误%}
请写代码
{%endif%}
tabIndent.renderAll（）；
$（函数（）{
$（“.lined”）.linedtextarea(
{selectedClass:'lineselect'}
);
});
{%if响应%}
{{response}}
{%if debug_access%}
{%csrf_令牌%}
调试
{%endif%}
/*我试图根据编译器错误给出的行号高亮显示的脚本*/
$（文档）.ready（函数（）{
var errText=document.getElementById（“输出文本”）；
if（errText！=null）
{
var reset=document.getElementsByClassName（“lineno lineselect”）；
对于（变量i=0；iif (lineNo == opts.selectedLine)
if (lineNo in opts.selectedLine)
linedtextarea({selectedLine:[1,2,3]});