I'm trying to make the news list more dynamic , so i tried to make it in array and loop on the categories but unfortunately the function getw () does not fetch the data ?
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-5">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto ml-2 mt-lg-0" id="line">
</ul>
</div>
</nav>
<div class="container">
<div class="row" id="posts-row">
</div>
</div>
java script code
var list = ["General", "Entertainment", "Health", "Science", "Sports", "Technology"];
function getw() {
var lines = "";
for (var i = 0; i < list.length; i++) {
lines += `<li>
<a class='nav-link' href='#'>` + list[i] + `</a>
</li>`
}
document.getElementById("line").innerHTML = lines; (not working i don't know why ?)
}
getdata("general")
var links = document.getElementsByClassName("nav-link");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function (e) {
var currentCat = e.target.text;
getdata(currentCat.toLowerCase())
})
}
var data;
function getdata(category) {
var httpReq = new XMLHttpRequest();
httpReq.open("GET", "http://newsapi.org/v2/top-headlines?country=eg&category=" + category + "&apiKey=d4f87946d7fc4322be9c2089316d5625");
httpReq.send();
data = [];
httpReq.addEventListener("readystatechange", function () {
if (httpReq.readyState == 4) {
data = JSON.parse(httpReq.response).articles;
Display();
}
})
}
function Display() {
var temp = "";
for (var i = 0; i < data.length; i++) {
temp += `<div class ='col-md-4'>
<div>
<img src=`+ data[i].urlToImage + ` class='img-fluid'>
<h4>`+ data[i].title + `</h4>
<p>`+ data[i].description + `</p>
</div>
</div>`
}
document.getElementById("posts-row").innerHTML = temp;
}
.............................................................................................///////////////////////////////////////////
At least in the code you posted, you are not invoking the getw function.
Try adding getw() at the end of your JavaScript.
Related
I receive the following error:
Uncaught ReferenceError: notesObj is not defined
at HTMLButtonElement.<anonymous> (apps.js:14)
I could store the object earlier in the local storage and there was no error generated. But after the removal of the 'card' division after 'your notes' it is now difficult for me to remove the error.
//shownotes();
//If user add a note, add it to the local storage
let addBtn = document.getElementById('addBtn')
addBtn.addEventListener('click', function(e) {
let addTxt = document.getElementById('addTxt');
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
} else {
nodesObj = JSON.parse(notes);
}
notesObj.push(addTxt.value)
localStorage.setItem('notes', JSON.stringify(notesObj));
addTxt.value = '';
console.log(notesObj);
shownotes();
})
function shownotes() {
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
} else {
nodesObj = JSON.parse(notes);
}
let html = '';
notesObj.forEach(function(element, index) {
html += `<div class="card my-3 mx-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Notes ${index + 1}</h5>
<p class='card-text'>${element}</p>
Add Notes
<buttom href="#" class="btn btn-danger my-3">Delete notes</button>
</div>
</div>`
});
let notesElm = document.getElementById('notes')
if (notes.length != 0) {
notesElm.innerHTML = html;
} else {
notesElm.innerHTML = `Nothing to show! Use 'Add notes section above to add notes `
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Make notes!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container my-3 text-center">
<h1>Magic notes</h1>
<div class="card">
<div class="card-body">
<h5 class="card-title">Quick notes</h5>
<div class="form-floating">
<textarea class="form-control" id="addTxt" rows="3" style="height: 100px"></textarea>
<!-- <label for="floatingTextarea2">Add your notes here</label> -->
</div>
<button href="#" class="btn btn-primary my-3" id="addBtn">Add notes</button>
</div>
</div>
</div>
<hr>
<h1 class="text-center">Your notes</h1>
<hr>
<div id="notes" class="row container-fluid">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Well, from the code you provided, it appears to me that you try to use nodesObj before it was ever defined anywhere. I think you meant notesObj. Either define nodesObj like this, or fix the typo.
You may want to do something like
Now my java script code is from here.
var nodesObj = new Array(); // Declare the variable BEFORE using it anywhere.
console.log('This is the notes app.')
//shownotes();
//If user add a note, add it to the local storage
let addBtn = document.getElementById('addBtn')
addBtn.addEventListener('click', function (e) {
let addTxt = document.getElementById('addTxt');
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
}
else {
nodesObj = JSON.parse(notes);
}
notesObj.push(addTxt.value)
localStorage.setItem('notes', JSON.stringify(notesObj));
addTxt.value = '';
console.log(notesObj);
shownotes();
})
function shownotes() {
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
}
else {
nodesObj = JSON.parse(notes);
}
let html = '';
notesObj.forEach(function (element, index) {
html += `<div class="card my-3 mx-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Notes ${index + 1}</h5>
<p class='card-text'>${element}</p>
Add Notes
<buttom href="#" class="btn btn-danger my-3">Delete notes</button>
</div>
</div>`
});
let notesElm = document.getElementById('notes')
if (notes.length != 0) {
notesElm.innerHTML = html;
}
else {
notesElm.innerHTML = `Nothing to show! Use 'Add notes section above to add notes `
}
}
you write somethings wrong
test it
console.log('This is the notes app.')
//shownotes();
//If user add a note, add it to the local storage
let addBtn = document.getElementById('addBtn')
var nodesObj = new Array();
var notesObj = new Array();
addBtn.addEventListener('click', function (e) {
let addTxt = document.getElementById('addTxt');
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
}
else {
nodesObj = JSON.parse(notes);
}
notesObj.push(addTxt.value)
localStorage.setItem('notes', JSON.stringify(notesObj));
addTxt.value = '';
console.log(notesObj);
shownotes();
})
function shownotes() {
let notes = localStorage.getItem('notes');
if (notes == null) {
notesObj = [];
}
else {
nodesObj = JSON.parse(notes);
}
let html = '';
notesObj.forEach(function (element, index) {
html += `<div class="card my-3 mx-3" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Notes ${index + 1}</h5>
<p class='card-text'>${element}</p>
Add Notes
<buttom href="#" class="btn btn-danger my-3">Delete notes</button>
</div>
</div>`
});
let notesElm = document.getElementById('notes')
if (notes.length != 0) {
notesElm.innerHTML = html;
}
else {
notesElm.innerHTML = `Nothing to show! Use 'Add notes section above to add notes `
}
}
I am retrieving the data(question) from the database and setting that value to the button.
When I tried to click on the button it should expand the "answer" to that question but it's not happening. I have completely designed rows in the script itself.
I have created a div in HTML and trying to add the rows dynamically to that div in script.
<div class="accordion" id="accordionExample">
<div id="questions">
</div>
</div>
<script>
var store;
var store_count = 0;
var store_row = document.createElement("div");
db.collection("FAQs").orderBy("Priority","asc").get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
var qid = doc.id;
var docRef = db.collection("PopopFAQs").doc(qid);
docRef.get().then(function(doc) {
if (doc.exists) {
console.log("Document data:", doc.data());
store_count++;
store = document.createElement("div");
store.setAttribute("class", "card");
store.setAttribute("id", qid);
if(store_count == 1) {
store.innerHTML = `<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link no-wrap collapsed btn-faqs" type="button"
data-toggle="collapse" data-target="#`+ doc.data().Priority +`"
aria-expanded="false" aria-controls="collapseThree">
<i class="fa fa-arrow-right"></i> `+ doc.data().Question +`
</button>
</h5>
</div>
<div id="`+ doc.data().Priority +`" class="collapse show"
aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">`+ doc.data().Answer +`
</div>
</div>`;
}
else {
store.innerHTML = `<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link no-wrap collapsed btn-faqs" type="button"
data-toggle="collapse" data-target="#`+ doc.data().Priority +`"
aria-expanded="false" aria-controls="collapseThree">
<i class="fa fa-arrow-right"></i> `+ doc.data().Question +`
</button>
</h5>
</div>
<div id="`+ doc.data().Priority +`" class="collapse"
aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">`+ doc.data().Answer +`
</div>
</div>`;
}
store_row.append(store);
document.getElementById("questions").innerHTML = store_row.innerHTML;
} else {
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
});
});
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
I'm trying to pull info from a JSON file into JavaScript and then to an HTML page but it keeps erroring when I get to a for loop that takes info from said file.
function digiLevel() {
document.getElementById("digivice").innerHTML = "Loading...";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
if (xmlhttp.status == 200) {
var textBox = document.getElementById("digivice");
var output1 = "";
var output2 ="";
var output3 = "";
var digimon = xmlhttp.responseText;
console.dir(digimon);
digimon = JSON.parse(digimon);
console.dir(digimon);
output1 = "<ul>";
for (i = 0; i < 6; i++) {
output2 += "<li>" + digimon[i].name + " is a(n) " + digimon[i].level + "</li><br>";
}
output3 = "</ul>";
textBox.innerHTML = output1 + output2 + output3;
}
}
xmlhttp.open("GET", "http://ec2-54-158-64-221.compute-1.amazonaws.com/Challenge9/webService.php?content=data&format=json", true);
xmlhttp.send();
}
And it returns the Uncaught TypeError on the line
output2 += "<li>" + digimon[i].name + " is a(n) " + digimon[i].level + "</li><br>";
I don't see how 'name' is undefined?? Maybe I'm just blind; it's 1AM here.
EDIT:
Thanks for the guiding comments; I was able to find my error:
digimon by itself didn't have a name tag of its own even with an index variable, and so I accessed the name tag by
digimon.digivice.digimon[i].name
after returning digimon to the console to analyze its contents. I'm still new to working with JSON/XML so if there is a faster/more efficient/effective way to achieve the same result, do please let me know!
And it returns the Uncaught TypeError on the line
output2 += "<li>" + digimon[i].name + " is a(n) " + digimon[i].level + "</li><br>";
Not sure why you have hard-coded your for-loop as
for (i = 0; i < 6; i++) { //where is 6 coming from
Looks like somewhere during the iteration, digimon[i] doesn't exists (is undefined), so make your for-loop condition as
for (i = 0; i < digimon.length; i++) { //where is 6 coming from
change this:
digimon = JSON.parse(digimon);
to:
digimon = JSON.parse(digimon).digivice.digimon
according to your code :
xmlhttp.open("GET", "http://ec2-54-158-64-221.compute-1.amazonaws.com/Challenge9/webService.php?content=data&format=json", true);
and better change this:
for (i = 0; i < 6; i++) {
to
for (let i = 0; i < digimon.length; i++) {
let fetchbtn = document.getElementById('fetchbtn');
let popbtn = document.getElementById('populate');
fetchbtn.addEventListener('click', buttonClickHandler)
popbtn.addEventListener('click', pophandler)
function buttonClickHandler() {
console.log('You Have Clicked The Fetch Button')
//Create XHR Object
const xhr = new XMLHttpRequest();
//Open The Object
xhr.open('POST', 'http://dummy.restapiexample.com/api/v1/create', true);
xhr.getResponseHeader('Content-type', 'application/json')
//What To Do On Progress
xhr.onprogress = function() {
console.log('On Progress')
}
// xhr.onreadystatechange = function (){
// console.log('ready state', xhr.readyState)
// }
//Response Is Ready
xhr.onload = function() {
if (this.status === 200) {
console.log(this.responseText)
console.log('We are done')
} else {
console.error('Some Error Occoured')
}
}
//Send Data
params = `{"name":"Krishna","salary":"210000","age":"1234568945465"}`;
xhr.send(params)
}
function pophandler() {
console.log('You Have Just Clicked The Populate Handler')
const xhr = new XMLHttpRequest()
xhr.open('GET', 'ajax.json', true)
xhr.getResponseHeader = ('Content-type', 'application/j-son')
xhr.onprogress = function() {
console.log('Loading Pop')
}
xhr.onreadystatechange = function statechange() {
console.log('Current Loading State Is ', xhr.readyState)
}
xhr.onload = function() {
if (this.status === 200) {
let obj = JSON.parse(this.responseText)
console.log(obj)
let list = document.getElementById('list');
str = "";
for (i in obj) {
str += `<li>${obj[i].name}</li>`;
}
list.innerHTML = str;
console.log('We Are Done')
} else if (this.status === 429) {
console.error('To Many Requests')
} else {
console.error('Some Error Occoured')
}
}
xhr.send()
}
// http://dummy.restapiexample.com/api/v1/employees
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<title>Hello, AJAX</title>
</head>
<body>
<div class="container my-4">
<h1>AJAX Tutorial</h1>
<button type="button" id="fetchbtn" title='Fetch Data' class="btn btn-primary">Write Data</button>
<button type="button" id="populate" title='Populate Data' class="btn btn-success">Fetch Data</button>
<ul id="list">
<h1></h1>
</ul>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="ajax.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
I have a situation binding click events to the static parent for dynamically added children which is not working. My original post contained example code which seemed to reproduce the problem but was mistakenly using an id in the dynamic content in stead of the class.
This update more accurately represents the actual implementation however I am unable to reproduce the problem in this example.
<div id="page">
<div id="section-0" class="container">
<span>section 0</span>
<div id="section-actions">
<button class="button action-zero">zero</button>
</div>
</div>
<div id="section-1" class="container">
<span>section 1</span>
<div class="section-actions"></div>
</div>
<div id="section-2" class="container">
<span>section 2</span>
<div class="section-actions"></div>
</div>
<script>
action_array = ['zero', 'one', 'two', 'three'];
section_actions = ['one', 'two', 'three'];
add_section_actions();
bind_actions();
function add_section_actions() {
for (var s = 1; s <= 2; s++) { // for sections 1 and 2
var actions_html = '';
for (var i = 0; i < section_actions.length; i++) { // for all the actions
var action = section_actions[i];
actions_html = actions_html + '<button class="action-' + action + '">' + action + '</button>';
}
$('#section-'+s+' .section-actions').html(actions_html);
}
}
function bind_actions() {
//console.log('bind_actions called');
for (var i = 0; i < action_array.length; i++) {
//console.log(i);
var action = action_array[i];
//console.log('attempting to bind action for '+action);
$('#page').on('click', '.action-' + action, function() {
var this_container = $(this).closest('.container');
var this_container_id = this_container.attr('id');
console.log('this_container_id: ' + this_container_id);
});
}
}
</script>
add the class class="action-'+action+'" to your buttons
actions_html = actions_html + '<button class="action-'+action+'" id="section-2-button-' + action + '">' + action + '</button>';
Demo
action_array = ['zero', 'one', 'two', 'three'];
section_two_actions = ['one', 'two', 'three'];
add_section_two_actions();
bind_actions();
function add_section_two_actions() {
var actions_html = '';
for (var i = 0; i < section_two_actions.length; i++) {
var action = section_two_actions[i];
//console.log('adding section 2 action: '+action);
actions_html = actions_html + '<button class="action-'+action+'" id="section-2-button-' + action + '">' + action + '</button>';
}
$('#section-2-actions').html(actions_html);
}
function bind_actions() {
//console.log('bind_actions called');
for (var i = 0; i < action_array.length; i++) {
//console.log(i);
var action = action_array[i];
//console.log('attempting to bind action for '+action);
$('#page').on('click', '.action-' + action, function() {
var this_container = $(this).closest('.container');
var this_container_id = this_container.attr('id');
console.log('this_container_id: ' + this_container_id);
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<div id="section-0" class="container">
<span>section 0</span>
<div id="section-0-actions">
<button class="button action-zero">zero</button>
</div>
</div>
<div id="section-1" class="container">
<span>section 1</span>
<div id="section-1-actions">
<button class="button action-one">one</button>
<button class="button action-two">two</button>
<button class="button action-three">three</button>
</div>
</div>
<div id="section-2" class="container">
<span>section 2</span>
<div id="section-2-actions"></div>
</div>
</div>
QUESTION BELOW
I'm currently making a responsive one-page website with Bootstrap 3.
There is a navbar at the top, and when there is a click on it, it should change how the navbar at the bottom looks like. Then when someone click's on the navbar at the bottom, it would change how the jumbotron in the middle looks like. I have tried many things, but nothing is working. Help would be much appreciated. My Current Code is below.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Pakistan Project</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<button id="demoUp" onclick="demo()">Demographics</button>
<button id="geoUp" onclick="geo()">Geography</button>
<button id="statsUp" onclick="stats()">Statistics</button>
<script>
function demo() {
document.getElementById('lowerTitle').innerHTML = "Demographics";
document.getElementById("loweritem1text").innerHTML = 'a';
document.getElementById("loweritem2text").innerHTML = ;
document.getElementById("loweritem3text").innerHTML = 'b';
document.getElementById("loweritem4text").innerHTML = 'c';
document.getElementById("loweritem5text").innerHTML = ;
document.getElementById("loweritem6text").innerHTML = ;
document.getElementById("loweritem7text").innerHTML = ;
document.getElementById("loweritem8text").innerHTML = ;
document.getElementById("loweritem9text").innerHTML = ;
document.getElementById("loweritem1text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem1text").innerHTML}
document.getElementById("loweritem2text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem2text").innerHTML}
document.getElementById("loweritem3text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem3text").innerHTML}
document.getElementById("loweritem4text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem4text").innerHTML}
document.getElementById("loweritem5text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem5text").innerHTML}
document.getElementById("loweritem6text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem6text").innerHTML}
document.getElementById("loweritem7text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem7text").innerHTML}
document.getElementById("loweritem8text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem8text").innerHTML}
document.getElementById("loweritem9text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem9text").innerHTML}
}
function geo() {
document.getElementById('lowerTitle').innerHTML = 'Geography'
document.getElementById("loweritem1text").innerHTML =
document.getElementById("loweritem2text").innerHTML =
document.getElementById("loweritem3text").innerHTML =
document.getElementById("loweritem4text").innerHTML =
document.getElementById("loweritem5text").innerHTML =
document.getElementById("loweritem6text").innerHTML =
document.getElementById("loweritem7text").innerHTML =
document.getElementById("loweritem8text").innerHTML =
document.getElementById("loweritem9text").innerHTML =
document.getElementById("loweritem1text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem1text").innerHTML}
document.getElementById("loweritem2text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem2text").innerHTML}
document.getElementById("loweritem3text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem3text").innerHTML}
document.getElementById("loweritem4text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem4text").innerHTML}
document.getElementById("loweritem5text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem5text").innerHTML}
document.getElementById("loweritem6text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem6text").innerHTML}
document.getElementById("loweritem7text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem7text").innerHTML}
document.getElementById("loweritem8text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem8text").innerHTML}
document.getElementById("loweritem9text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ; document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem9text").innerHTML}
}
function stats() {
document.getElementById('lowerTitle').innerHTML = 'Statistics';
document.getElementById("loweritem1text").innerHTML = 'a';
document.getElementById("loweritem2text").innerHTML = 'b';
document.getElementById("loweritem3text").innerHTML = 'c';
document.getElementById("loweritem4text").innerHTML = 'd';
document.getElementById("loweritem5text").innerHTML = 'f';
document.getElementById("loweritem6text").innerHTML = 'f';
document.getElementById("loweritem7text").innerHTML = 'd';
document.getElementById("loweritem8text").innerHTML = 'd';
document.getElementById("loweritem9text").innerHTML = 'e';
document.getElementById("loweritem1text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem1text").innerHTML}
document.getElementById("loweritem2text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem2text").innerHTML}
document.getElementById("loweritem3text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem3text").innerHTML}
document.getElementById("loweritem4text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem4text").innerHTML}
document.getElementById("loweritem5text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem7text").innerHTML}
document.getElementById("loweritem6text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem6text").innerHTML}
document.getElementById("loweritem7text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem7text").innerHTML}
document.getElementById("loweritem8text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem8text").innerHTML}
document.getElementById("loweritem9text").onclick = function() { document.getElementById('jumboInfo').innerHTML = ;
document.getElementById("jumboHeader").innerHTML = document.getElementById("loweritem9text").innerHTML}
}
</script>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="lowerTitle" class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li id="loweritem1"></li>
<li id="loweritem2"></li>
<li id="loweritem3"></li>
<li id="loweritem4"></li>
<li id="loweritem5"></li>
<li id="loweritem6"></li>
<li id="loweritem7"></li>
<li id="loweritem8"></li>
<li id="loweritem9"></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="jumbotron">
<h1 id="jumboHeader"></h1>
<p id="jumboInfo"></p>
</div>
</div>
</body>
</html>
Since you're already using jQuery, I suggest you use the jQuery shell for event handling. This way you won't disrupt what Bootstrap is already doing.
instead of using the onclick attribute here
<button id="demoUp" onclick="demo()">Demographics</button>
<button id="geoUp" onclick="geo()">Geography</button>
<button id="statsUp" onclick="stats()">Statistics</button>
add eventhandlers like this:
$('#demoUp').on('click', demo);
$('#geoUp').on('click', geo);
$('#statsUp').on('click', stats);