Question

我无法动态地将链接或按钮添加到侧栏。我尝试使用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>

我的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＆＃39; mySideNav＆＃39;并通过为其innerHTML属性分配新值来覆盖其内容。你应该做的是

创建新的锚元素
使用innerHTML属性插入所需的值（即＆＃34;问题N＆＃34;）
将新创建的元素附加到您的mySideNav＆＃39; 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);

}

我希望这有帮助！

Answer 2

根据您的问题和您提供的代码，我认为您需要使用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函数＆＃34; navigateToQuestion＆＃34;显示作为参数传递的问题，也许可能是这样的想法：

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

Haven未对代码进行测试，但我认为它应该可行。希望你解决问题：）

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

2 个答案: