Javascript/html clear div contents?

Home » Programming & Design » Javascript/html clear div contents?
Programming & Design No Comments

Hey everyone. Anyone willing to help on this I really appreciate it.
What I'm doing here is I have 2 columns on my main page.

the left side is a div called "questions" its filled with a href's.

the right side is where I want the answer to appear when the question is clicked.

What I'm

Hey everyone. Anyone willing to help on this I really appreciate it.
What I'm doing here is I have 2 columns on my main page.

the left side is a div called "questions" its filled with a href's.

the right side is where I want the answer to appear when the question is clicked.

What I'm trying to do is when a new <a href> is clicked, the answer disappears. for the sake of simplifying this I'll just put a couple questions of what I have.

——html code—–

<div id="questions">
<p><a href="#" onclick="showDiv1()">1) What is a hurricane, typhoon, or tropical cyclone</a>
<a href="#" onclick="showDiv2()">2) What is an easterly wave and what causes them</a>
</div>

<div id="answer1" style=display:none; class="answers" >

<p>Content that answers question</p></div>

<div id="answer2" style=display:none; class="answers" >
<p>Content that answers question</p></div>

javascript code

function toggle() {
var one = document.getElementById('answer1');
var two = document.getElementById('answer2');
var three = document.getElementById('answer3');

if(one.style.display == 'block' || two.style.display == 'block' )
one.style.display = 'none';
two.style.display = 'none';

else
one.style.display = 'block';
}

function showDiv1() {

document.getElementById('answer1').style = "block";
}
function showDiv2() {

document.getElementById('answer2').style = "block";
}

Best Answer:

Henderson: 1. In the 1750s there was virtually no taxation
2. Trading with others nations was unlimited and virtually unregulated.
3. The British were not quartering troops in America.
4. The colonists could move wherever they wanted (pre-Proclamation of 1763)
5. British troops were rarely seen (if at all).
6. Colonial ships could sail the high seas without British interference
7. Colonial sailors were never impressed by the British navy

Other answer:

Henderson:
Where are you storing your questions/answers? I'd start by storing them all in a JSON object. and using that to reference them, rather than hard-coding it in the HTML. This'll make it easier to add other questions later.
How do you want the questions to be displayed? I assume all at once?
Here's a quick example I threw together: https://jsfiddle.net/09ezapaf/4/
Basically each question has an onclick property. When the link is clicked, it sets the innerHTML property of the answers div ('#a-div') to that question's answer.
Caroline:
Assume you have div

<div id="foo">Some text here</div>

To hide the div entirely,

document.getElementById( "foo" ).style = "none";

To clear the contents of the div,

document.getElementById( "foo" ).innerHTML = "";

To set the contents of the div to something else,

document.getElementById( "foo" ).innerHTML = "Some new text.";

Kyle T:
use jquery

then you can use either the .hide() and .show() functions or the .toggle() function to hide and show whatever you want, easier and cleaner than pure js

LEAVE A COMMENT