Can I use the HTML name file directly in .getElementById or do I have to always use document
Question
When you want to get an element from a specific HTML you use document.getElementById, but is it possible to use the actual name of the HTML file instead of using' document'? The reason I am asking this is that I have two different HTML files linked to the same JS file, so I can´t run my JS file because in the same function I have two variables from two different HTML files, once he gets the element from one of the HTML files it can´t detect the other file.
This is my function in the JavaScript.
var config = parseInt(document.getElementById('enc_porta').getAttribute("config"));
if(config == 2 && resetError) { ILCPhoenixWrite(null, 'config', 11, 0); }
if (lcd == 1){
var elements = document.getElementById("numpad_p1").getElementsByClassName("selected");
while (elements.length > 0) { elements[0].classList.remove("selected"); }
usercode = "";
}
else if (lcd == 2){
var elements = document.getElementById("numpad_p2").getElementsByClassName("selected");
while (elements.length > 0) { elements[0].classList.remove("selected"); }
usercode = "";
}
var elements = document.getElementById("numpad_config").getElementsByClassName("selected");
while (elements.length > 0) { elements[0].classList.remove("selected"); }
usercode = "";
document.getElementById('enc_porta').setAttribute("numpad_p1", (hidePad ? 0 : 1)); /* '?' true ':'false */
document.getElementById('enc_porta').setAttribute("numpad_p2", (hidePad ? 0 : 1));
document.getElementById('enc_porta').setAttribute("numpad_config", (hidePad ? 0 : 1));
}
This is my HTML file Porta1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="js/custom.js"></script>
</head>
<body>
<div id="enc_porta" recon=0 config=0 pad=0 bt_emergency=0 bt_entry=0 numpad_p1=0 numpad_config=0 lock=0 >
<div id="config" class="bt sqr66x66 blur" onclick="ILCPhoenixWrite(this, 'config', 2, 0);KeyPadOpen(this);"></div>
<div id="back" class="bt sqr66x66" onclick="ILCPhoenixWrite(this, 'config', 3, 0);"></div>
<div id="recon" class="bt sqr20x20 blur"></div>
<div id="lockscreen1" class="lock"></div>
<div id="bt_entry_1" class="bt_entry">
<span id="circle_1" class="circle_1"></span>
<span id="circle_2" class="circle_2"></span>
</div>
<div id="blackback1" class="blackback"></div>
<div id="bt_emergency" class="bt sqr300x250 blur" onclick="ILCPhoenixWrite(this, 'bt_emergency', 5, 0);"></div>
<div id="numpad_p1" class="numpad">
<div id="num1" class="padbt sqr86x86" onclick="KeyPadClick(this, 1, 1);">1</div><div id="num2" class="padbt sqr86x86" onclick="KeyPadClick(this, 2, 1);">2</div><div id="num3" class="padbt sqr86x86" onclick="KeyPadClick(this, 3, 1);">3</div>
<div id="num4" class="padbt sqr86x86" onclick="KeyPadClick(this, 4, 1);">4</div><div id="num5" class="padbt sqr86x86" onclick="KeyPadClick(this, 5, 1);">5</div><div id="num6" class="padbt sqr86x86" onclick="KeyPadClick(this, 6, 1);">6</div>
<div id="num7" class="padbt sqr86x86" onclick="KeyPadClick(this, 7, 1);">7</div><div id="num8" class="padbt sqr86x86" onclick="KeyPadClick(this, 8, 1);">8</div><div id="num9" class="padbt sqr86x86" onclick="KeyPadClick(this, 9, 1);">9</div>
<div id="pdBk" class="padbt sqr86x86" onclick="KeyPadClick(this, -1, 1);">←</div><div id="num0" class="padbt sqr86x86" onclick="KeyPadClick(this, 0, 1);">0</div><div id="pdOk" class="padbt sqr86x86" onclick="KeyPadClick(this, 10, 1);">✓</div>
</div>
<b id="numpad_config" class="numpad_config">
<div id="num1" class="padbt sqr26x26" onclick="KeyPadClick(this, 1, 1);">1</div><div id="num2" class="padbt sqr26x26" onclick="KeyPadClick(this, 2, 1);">2</div><div id="num3" class="padbt sqr26x26" onclick="KeyPadClick(this, 3, 1);">3</div>
<div id="num4" class="padbt sqr26x26" onclick="KeyPadClick(this, 4, 1);">4</div><div id="num5" class="padbt sqr26x26" onclick="KeyPadClick(this, 5, 1);">5</div><div id="num6" class="padbt sqr26x26" onclick="KeyPadClick(this, 6, 1);">6</div>
<div id="num7" class="padbt sqr26x26" onclick="KeyPadClick(this, 7, 1);">7</div><div id="num8" class="padbt sqr26x26" onclick="KeyPadClick(this, 8, 1);">8</div><div id="num9" class="padbt sqr26x26" onclick="KeyPadClick(this, 9, 1);">9</div>
<div id="pdBk" class="padbt sqr26x26" onclick="KeyPadClick(this, -1, 1);">←</div><div id="num0" class="padbt sqr26x26" onclick="KeyPadClick(this, 0, 1);">0</div><div id="pdOk" class="padbt sqr26x26" onclick="KeyPadClick(this, 10, 1);">✓</div>
</b>
</div>
</body>
</html>
The second HTML file is the same but instead of numpad_p1 I have numpad_p2.
1 answers
solution1
0 2022-09-16 10:06:41
I think you have a bit of a misunderstanding of how things work on the client end (ie in the browser).
When the browser loads the HTML, if there are any script tags, it will load the script and process it, altering the DOM as the script instructs.
So if you load Porta1.html, then it will load the script file "custom.js". If you load your other page, and it has the same script tag then "custom.js" will also be loaded.
The instances of "custom.js" loaded by each page are separate and don't know about each other.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.