Javascript 为侧栏添加可单击的按钮或链接

我在动态向侧栏添加链接或按钮时遇到问题。我正在尝试使用JavaScript添加适当数量的元素或按钮，我不知道什么更好。本质上，这是用来制作一个JS问答网站的，边栏中的每个按钮都会让你跳转到问题，让问题更清楚：问题4会带你到第4个问题，依此类推

这是我的侧栏：

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

My 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);    

            }
        }

我一直在尝试各种不同的方法，但我无法让它发挥作用，如果有人能帮助我，我将不胜感激

---

以下是该网站的完整代码，以防您想了解我如何做其他事情：

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

创建一个新的锚元素 使用innerHTML属性插入所需的值，即问题N 将新创建的元素附加到“mySideNav”div元素。 我写了一篇小文章让你们看我的答案，但我会把我的代码贴在下面让你们看

// 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);

}

---

我希望这有帮助

根据您的问题和您提供的代码，我认为您需要使用onclick属性定义一个div，以使相应的问题可见。假设您可以访问此函数中的问题数量，则可能是这样的：

function questionNav(){
    for(var i = 0; i < numberOfQuestions; i++){
        document.getElementById("mySidenav").innerHTML += "<div style='cursor:pointer' onclick=navigateToQuestion(" + (i+1) + ")/> Question " + (i+1) + "</div>";
    }
}

我还没有测试代码，但我认为它应该可以工作。

---

希望您的问题得到解决：

您需要使用类似的工具，非常感谢。这非常有帮助，代码正确地提供了大量问题，但这些问题不可单击。我会试着找出原因！再次感谢！没问题！也许我在分配onclick函数时遗漏了一些括号之类的东西。。如果你发现了问题，让我知道：如果你最终解决了问题，也别忘了标记答案。所以我发现了问题，这是一个额外的/整个过程。我还将div改为按钮。不确定这是否有帮助，但我发现了词尾的语法错误。谢谢你的帮助啊，我明白了。。下次我将尝试提供一个完全有效的解决方案。对不起！非常感谢您，您的示例非常有用，我将尝试在代码中实现类似的方法！再次感谢

function navigateToQuestion(question){
    document.getElementById("question_" + currentQuestionInView).style.display = "none";
    currentQuestionInView = question;
    document.getElementById("question_" + question).style.display = "block";
}