i trying stimulate forum. , have done far, when user asked question
- the topic , questions saved object , pushed array
- on main page, objects in array displayed
- 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
Post a Comment