javascript - How do i call something out from my LocalStorage and make the thing dynamic -


i trying stimulate forum. , have done far, when user asked question

  1. the topic , questions saved object , pushed array
  2. on main page, objects in array displayed
  3. i able click on each of displayed links.

but here comes tricky part. how use 1 same html , change code in dynamically.

i know call use array[0].question change content of innerhtml code. not know how make specific array[number] come out.

for example. if have array of length 0 - 4! , want call array[0] when clicked first link. followed array[1] when clicked second link! how do it!

another solution found use of url hash. in order use url hash, have make 5 amount of pages if want make array object dynamic right?

hopefully guys understand mean!

from i've gathered, have array of questions like

var questions = [{   title: 'question 1',   description: 'something question 1' }, {   title: 'question 2',   description: 'something question 2' }] 

and want able show description each question without navigating new page. possible plain javascript (cleaner jquery).

here general plain js approach can build on:

var questions = [{    title: 'question 1',    description: 'something question 1'  }, {    title: 'question 2',    description: 'something question 2'  }]    var questioncontainer = document.getelementbyid('questions');  var descriptioncontainer = document.getelementbyid('description');  var contentcontainer = document.getelementbyid('content');  var backbtn = document.getelementbyid('back-btn');    questions.foreach(function(question) {    var q = document.createelement('div');    q.innertext = question.title;    q.classname = 'question';    q.addeventlistener('click', function() {      contentcontainer.innertext = question.description;      descriptioncontainer.style.display = 'block';      questioncontainer.style.display = 'none';    })    questioncontainer.appendchild(q);  })    backbtn.addeventlistener('click', function() {    descriptioncontainer.style.display = 'none';    questioncontainer.style.display = 'block';  })
.question:hover,  #back-btn:hover {    color: blue;    cursor: pointer;  }
<div id="questions"></div>    <div id="description" style="display: none;">    <div id="back-btn">back</div>    <div id="content"></div>  </div>

please note fine playing around, or personal project. however, end result still "static" because have static array of questions storing on front end. if want dynamic, have store questions , relevant details in kind of database.


Comments