英文:
How can I select the innerhtml of a variable name in an array?
问题
如何使secondhtmlelement的innerHTML显示为"Hello World"？
我尝试了类似上面的代码，当我按下某些东西时，它应该根据我想要的数组条目来更改不同元素的innerHTML。
英文:
So if I have this code:
const firsthtmlelement = document.getElementById("firsthtmlelement");const secondhtmlelement = document.getElementById("secondhtmlelement");const array = ['firsthtmlelement', 'secondhtmlelement']array[1].innerHTML = "Hello World";
How can I make the secondhtmlelement's innerHTML show up as "Hello World"?
I tried something similar to the code above, when I press something then it is supposed to change the innerHTML of a different element depending on which entry from an array I wanted.
答案1
得分: 1
尝试在你的 array 中添加实际元素，而不仅仅是字符串名称：
let firsthtmlelement = document.getElementById("firsthtmlelement");let secondhtmlelement = document.getElementById("secondhtmlelement");const button = document.getElementById("button");const array = [firsthtmlelement, secondhtmlelement];button.addEventListener("click", function() {array[1].innerHTML = "Hello World";});
<div id="firsthtmlelement">div1</div><div id="secondhtmlelement">div2</div><button id="button">press</button>
英文:
Try to add actual elements in your array instead of just string names:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let firsthtmlelement = document.getElementById("firsthtmlelement");let secondhtmlelement = document.getElementById("secondhtmlelement");const button = document.getElementById("button");const array = [firsthtmlelement, secondhtmlelement];button.addEventListener("click", function() {array[1].innerHTML = "Hello World";});
<!-- language: lang-html -->
<div id="firsthtmlelement">div1</div><div id="secondhtmlelement">div2</div><button id="button">press</button>
<!-- end snippet -->
答案2
得分: 0
如果你的变量是全局的，尝试使用以下方式：
window["variableName"].innerHTML = myValue;
let firsthtmlelement = document.getElementById("firsthtmlelement");let secondhtmlelement = document.getElementById("secondhtmlelement");const button = document.getElementById("button");const array = ['firsthtmlelement', 'secondhtmlelement'];button.addEventListener("click", function() {console.log(array[1]);// 在这个示例中，我们将硬编码要更改的元素window[array[1]].innerHTML = "Hello World";});
<div id="firsthtmlelement">div1</div><div id="secondhtmlelement">div2</div><button id="button">press</button>
英文:
if you variable is a global try using this window["variableName"].innerHTML = myValue;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let firsthtmlelement = document.getElementById("firsthtmlelement");let secondhtmlelement = document.getElementById("secondhtmlelement");const button = document.getElementById("button");const array = ['firsthtmlelement', 'secondhtmlelement'];button.addEventListener("click", function() {console.log(array[1]);//in this example we will just hardcode which element to changewindow[array[1]].innerHTML = "Hello World";});
<!-- language: lang-html -->
<div id="firsthtmlelement">div1</div><div id="secondhtmlelement">div2</div><button id="button">press</button>
<!-- end snippet -->
答案3
得分: 0
当你调用 arry[1] 时，你会得到一个字符串，而不是变量。
有很多方法可以实现动态变量。
下面我有两种解决方案：
第一个解决方案创建一个对象，其中键是名称，值是该元素的 querySelector。
第二种是使用类似你的示例的数组。
const elementsObject = {"firsthtmlelement": document.querySelector("#firsthtmlelement"),"secondhtmlelement": document.querySelector("#secondhtmlelement")};elementsObject["firsthtmlelement"].innerHTML = "Hello World 1";const elementsArray = [document.querySelector("#firsthtmlelement"), document.querySelector("#secondhtmlelement")];elementsArray[1].innerHTML = "Hello World 2";
<div id="firsthtmlelement"></div><div id="secondhtmlelement"></div>
英文:
When you call arry[1] you are getting a string, and not the variable.
There are many ways to accomplish dynamic variables.
Below I have two solutions:
The first solution creates an object where the key is the name and the value is the querySelector for that element.
The second is using an array like your example.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const elementsObject = {"firsthtmlelement": document.querySelector("#firsthtmlelement"),"secondhtmlelement": document.querySelector("#secondhtmlelement")};elementsObject["firsthtmlelement"].innerHTML = "Hello World 1";const elementsArray = [document.querySelector("#firsthtmlelement"), document.querySelector("#secondhtmlelement")];elementsArray[1].innerHTML = "Hello World 2";
<!-- language: lang-html -->
<div id="firsthtmlelement"></div><div id="secondhtmlelement"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论