javascript - 为侧栏添加可点击按钮或链接

Question

我在动态添加链接或按钮到侧边栏时遇到问题。我正在尝试使用 JavaScript 添加适当数量的元素或按钮(我不知道哪个更好)。本质上，这是用来制作一个 JS 测验网站，其中侧边栏中的每个按钮都会将您跳转到问题(为了更清楚:问题 4 将您带到第四个问题，依此类推)

这是我的侧边栏:

<div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <a href="#">Question </a>
</div>

我的 JS 尝试创建元素但失败了:

//add question numbers to the side bar
        function questionNav(){
            for(var i = 0; i < numberOfQuestions; i++){

                    document.getElementById("mySidenav").innerHTML = "Question " + (i+1) + "<br/>";
                //var newSideBarElm = "Question " + (i+1) + "<br/>";
                //document.getElementById("mySidenav").insertAdjacentHTML = ('beforeend',newSideBarElm);    

            }
        }

我一直在尝试多种不同的方法，但我无法使其发挥作用，如果有人能够帮助我，我将不胜感激。

这里是该网站的完整代码，以防您想了解我是如何做其他事情的:https://pastebin.com/hrSADLQy

Answer 1

因此，假设我正确理解您的问题，您当前正在做的是将 id 为“mySideNav”的 div 定位为目标，并通过为其 innerHTML 属性分配新值来覆盖其内容。你应该做的是

1. 创建一个新的 anchor 元素
2. 使用innerHTML属性插入您想要的值(即“问题N”)
3. 将新创建的元素附加到“mySideNav”div 元素。

我写了一个小demo让您看到我的答案的实际效果，但我会将我的代码发布在该答案下方供您查看。

// Grab and Store Element to append questions to
var mySideNav = document.getElementById('mySidenav');

// Designate number of questions
var numberOfQuestions = 10;

// Loop as many times as there are questions
for (let i  = 0; i < numberOfQuestions; i++) {

   // Step 1: Create a new anchor element 
   let newQuestion = document.createElement('a');

   // Assign href to whatever you want
   newQuestion.href = '#';

   // Step 2: Use the innerHTML attribute to insert your desired value
   newQuestion.innerHTML = 'Question ' + i + '<br>';

   // Step 3: Append your newly created element to your 'mySideNav' div element.
   mySideNav.appendChild(newQuestion);

}

希望这会有所帮助!