I keep getting an error on my homepage, but when i load it, under \"MY FAVORITE

Question

I keep getting an error on my homepage, but when i load it, under "MY FAVORITE BAND" when i click "add nirvana" it is supposed to display "only talented bands?" but then it is saying in the console message that there is an error on my JS CODE however I do not know how to fix this error.

so this is my HTML CODE'

Abiodun's Website

  

Skip to Main Content

Hello! Welcome to my Homepage

  

Home

About

News

Content

  

Welcome to my Homepage!

Add My Name

  

This is my first time creating a website and it has been fun so far. My name is Abiodun Ogunwomoju and I am a Computer Information Systems (CIS) major. You will find some interest things about me here. My goal this semester is to learn how to create an advanced website without needing to watch a tutorial video. Someday,I hope to learn how to program with Java, C++, Swift, Ruby, Python and C.

FEEL FREE TO EXPLORE AROUND!!

  

My Favorite Band

The Beatles

Imagine Dragons

Big Time Rush

One Direction

The Beatles

Add Nirvana?

Only talented bands?

Interesting Things About Me

I am 19 years old.

I am Freshman/Junior.

I came to University of Houston with my Associates Degree.

I am eager to learn different types of programming language.

My favorite TV show is Persons of Interest

Show Console Log

  

and this is my JS CODE

@import url('bootstrap.min.css');

@import url('https://fonts.googleapis.com/css?family=Dosis');

html, body{

background-color:rgb(147, 130, 43);

font-size: 18px;

height:100%;

margin:0;

padding:0;

}

body {

display:flex;

font-family: san-serif;

flex-direction: column;

color: Black;

}

p{

margin: 1em;

}

p.ridge {

border-style: ridge;

color:maroon;

background-color: black;

}

#skip {

display: none;

}

a {

text-decoration: none;

}

a:hover {

color: black;

}

header {

background: Black;

flex: none;

margin: 0;

padding: 0;

text-align: center;

}

h1 {

color: maroon;

font-family:sans-serif;

font-weight: bold;

}

h1 a:link,

h1 a:visited,

h1 a:hover,

h1 a:active {

color: Maroon;

font-weight: 100;

font-family: 'Bradley Hand', cursive;

}

h2 {

color: black;

font-family:cursive;

text-align: center;

text-decoration: none;

text-transform: uppercase;

}

h1,h2 {display: inline-block;}

nav {

font-family: Verdana, sans-serif;

}

nav ul {

list-style-type: square;

margin: 0;

padding: 0;

background:maroon;

}

nav li:first-child {

display: none;

text-align:right;

}

nav li:first-child:hover {

background-color:red;

}

nav li:not(:first-child)

{

display:none;

}

nav li:hover {

background-color: black;

}

nav li:hover a {

background-color: black;

}

nav a{

display:block;

text-decoration: none;

}

nav a:link,

nav a:visited,

nav a:hover,

nav a active {

text-decoration:none;

color: Black;

}

#main-content {

flex: 1;

}

section {

flex-direction:column;

display: flex;

}

section button {

background-color: black;

display:block;

max-width: 100%;

margin: auto;

}

article{

flex: 1;

float: left;

text-align: center;

padding: 1em;

}

article ol{ text-align: left;}

pre {

display: none;

flex: 1;

margin: 1em;

}

#talented {

display: none;

}

footer {

background-color: black;

bottom: 0;

color: white;

display: block;

width: 100%;

padding: 1em;

}

@media all and (min-width: 600px){

section{display: flex; flex-direction:row;}

}

  

@media all and (min-width:720px)

{

nav ul {padding:0 0 0 auto;}

nav li:first-child{display:none;}

nav li: not(:first-child) {display: inline-block: !important;}

nav a {display: block; padding: 1em;}

}

home / study / engineering / computer science / computer science questions and answers / i keep getting an error on my homepage, but when i load it, under "my favorite band" when i ...

Your question needs more information to be answered.

A Chegg Expert needs more info to provide you with the best answer. See comments below.

Question: I keep getting an error on my homepage, but when i load it, under "MY FAVORITE BAND" when i click...

Edit question

I keep getting an error on my homepage, but when i load it, under "MY FAVORITE BAND" when i click "add nirvana" it is supposed to display "only talented bands?" but then it is saying in the console message that there is an error on my JS CODE however I do not know how to fix this error.

so this is my HTML CODE'

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Abiodun's Website</title>

<link rel="stylesheet" href="_includes/_css/style.css" type="text/css" />

<script type="text/javascript" src="_includes/_scripts/script.js"></script>

</head>

  

<body>

<a id= "skip" href="#main-content">Skip to Main Content</a>

<header role="banner">

<h1><a href="#">Hello! Welcome to my Homepage</a></h1>

</header>

  

<nav role= "navigation">

<ul>

<li><a id="menuIcon" class="glyphicon glyphicon-menu-hamburger" href="#"></a></li>

<li class="menuItem"><a href="#">Home</a></li>

<li class="menuItem"><a href="#">About</a></li>

<li class="menuItem"><a href="#">News</a></li>

<li class="menuItem"><a href="#">Content</a></li>

</ul>

  

</nav>

<div id="main-content">

<section role="main">

<article>

<h2 id="greet">Welcome to my Homepage!</h2>

<button type="button" class="btn btn-warning">Add My Name</button>

  

<p class="ridge">This is my first time creating a website and it has been fun so far. My name is Abiodun Ogunwomoju and I am a Computer Information Systems (CIS) major. You will find some interest things about me here. My goal this semester is to learn how to create an advanced website without needing to watch a tutorial video. Someday,I hope to learn how to program with Java, C++, Swift, Ruby, Python and C.</p>

<strong>FEEL FREE TO EXPLORE AROUND!!<strong/>

</article>

  

<article>

<h2> My Favorite Band</h2>

<ol id="myList">

<li>The Beatles</li>

<li class="listItem">Imagine Dragons</li>

<li>Big Time Rush</li>

<li class="listItem">One Direction</li>

<li class="listItem">The Beatles</li>

</ol>

<button class="btn btn-warning" id="nirvana">Add Nirvana?</button>

<button class="btn btn-warning" id="talented">Only talented bands?</button>

</article>

<article>

<h2>Interesting Things About Me</h2>

<ol>

<li> I am 19 years old.</li>

<li> I am Freshman/Junior.</li>

<li>I came to University of Houston with my Associates Degree.</li>

<li> I am eager to learn different types of programming language.</li>

<li> My favorite TV show is <em>Persons of Interest</em>

</ol>

</article>

</section>

<section>

<button class="btn btn-warning" id="console">Show Console Log</button>

</section>

<section>

<pre>

</pre>

</section>

</div>

<footer role="contentinfo">

</footer>  

</body>

</html>

and this is my JS CODE

@import url('bootstrap.min.css');

@import url('https://fonts.googleapis.com/css?family=Dosis');

html, body{

background-color:rgb(147, 130, 43);

font-size: 18px;

height:100%;

margin:0;

padding:0;

}

body {

display:flex;

font-family: san-serif;

flex-direction: column;

color: Black;

}

p{

margin: 1em;

}

p.ridge {

border-style: ridge;

color:maroon;

background-color: black;

}

#skip {

display: none;

}

a {

text-decoration: none;

}

a:hover {

color: black;

}

header {

background: Black;

flex: none;

margin: 0;

padding: 0;

text-align: center;

}

h1 {

color: maroon;

font-family:sans-serif;

font-weight: bold;

}

h1 a:link,

h1 a:visited,

h1 a:hover,

h1 a:active {

color: Maroon;

font-weight: 100;

font-family: 'Bradley Hand', cursive;

}

h2 {

color: black;

font-family:cursive;

text-align: center;

text-decoration: none;

text-transform: uppercase;

}

h1,h2 {display: inline-block;}

nav {

font-family: Verdana, sans-serif;

}

nav ul {

list-style-type: square;

margin: 0;

padding: 0;

background:maroon;

}

nav li:first-child {

display: none;

text-align:right;

}

nav li:first-child:hover {

background-color:red;

}

nav li:not(:first-child)

{

display:none;

}

nav li:hover {

background-color: black;

}

nav li:hover a {

background-color: black;

}

nav a{

display:block;

text-decoration: none;

}

nav a:link,

nav a:visited,

nav a:hover,

nav a active {

text-decoration:none;

color: Black;

}

#main-content {

flex: 1;

}

section {

flex-direction:column;

display: flex;

}

section button {

background-color: black;

display:block;

max-width: 100%;

margin: auto;

}

article{

flex: 1;

float: left;

text-align: center;

padding: 1em;

}

article ol{ text-align: left;}

pre {

display: none;

flex: 1;

margin: 1em;

}

#talented {

display: none;

}

footer {

background-color: black;

bottom: 0;

color: white;

display: block;

width: 100%;

padding: 1em;

}

@media all and (min-width: 600px){

section{display: flex; flex-direction:row;}

}

  

@media all and (min-width:720px)

{

nav ul {padding:0 0 0 auto;}

nav li:first-child{display:none;}

nav li: not(:first-child) {display: inline-block: !important;}

nav a {display: block; padding: 1em;}

}

JS CODE

var log = '<p>This is a message in the console log.</p>';

function showCopy() {

var d = new Date();

var year = d.getFullYear();

var month = d.getMonth();

Months= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var footer = document.getElementsByTagName('footer')[0];

var p = document.createElement('p');

p.innerHTML = '&copy; '+ (Months[month])+ ' '+year +' by Abiodun (Abby) Ogunwomoju. All Rights Reserved.';

footer.appendChild(p);

log += '<p> A paragraph has been added to the footer. </p>';

}

window.onload = showCopy;

function toggleMenu() {

var items = document.getElementsByClassName ('menuItem');

var icon = document.getElementById ('menuIcon');

if (items[0].style.display == 'block') {

for (var i=0;i<items.length;i++){

items[i].style.display = 'none';

}

icon.classList.remove('glyphicon-remove');

icon.classList.add('glyphicon-menu-hamburger');

icon.setAttribute ('aria-label','View Navigation');

} else {

for (var i=0;i<items.length;i++){

items[i].style.display = 'block';

}

icon.classList.remove('glyphicon-menu-hamburger');

icon.classList.add('glyphicon-remove');

icon.setAttribute('aria-label','Collapse Navigation');

}

}

function addNirvana() {

var item = document.createElement('li');

var nirvana = document.getElementById('nirvana');

item.innerHTML = 'Nirvana';

document.getElementById('myList').appendChild(item);

log += '<p>Nirvana added to the list!</p>';

var firstArt = document.getElementsByTagName('article')[0];

firstArt.removeChild(nirvana);

log += '<p>#nirvana has been removed from HTML.</p>';

var talented = document.getElementById('talented');

talented.style.display = 'block';

log += '<p>#talented is now visible.</p>';

}

function talentedBands() {

var list = document.getElementById('myList');

var listItems = list.getElementsByTagName('li');

for (var i=0; i<listItems.length; i++) {

if (!listItems[i].classList.contains('listItem')) {

listItems[i].style.display = 'none';

}

}

log += '<p>Boring bands removed!</p>';

var talented = document.getElementById('talented');

talented.style.display = 'none';

log += '<p>#talented is now hidden again.</p>';

}

function greetUser() {

var currHead = document.getElementById('greet');

var name = prompt('What's your name?','Enter your name here.');

if ((name == null) || (name == 'Enter your name here.') || (name == '')) {

name = 'Unknown';

}

currHead.innerHTML = 'Greetings, '+ name +'!';

log += '<p>'+ name +' has been greeted.</p>';

}

function showMssg() {

var message = document.getElementsByTagName('pre')[0];

var console = document.getElementById('console');

if (message.style.display == 'block') {

log += '<p>The log is now hidden.</p>';

message.style.display = 'none';

console.innerHTML = 'Show Console Log';

} else {

log += '<p>The log is now visible.</p>';

message.innerHTML = log;

message.style.display = 'block';

console.innerHTML = 'Hide Console Log';

}

}

Explanation / Answer

Hi... I have changed js and html in your code.

home.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8"/>

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Abiodun's Website</title>

<link rel="stylesheet" href="_includes/_css/style.css" type="text/css" />

<script type="text/javascript" src="_includes/_scripts/script.js"></script>

</head>

  

<body>

<a id= "skip" href="#main-content">Skip to Main Content</a>

<header role="banner">

<h1><a href="#">Hello! Welcome to my Homepage</a></h1>

</header>

  

<nav role= "navigation">

<ul>

<li><a id="menuIcon" class="glyphicon glyphicon-menu-hamburger" href="#"></a></li>

<li class="menuItem"><a href="#">Home</a></li>

<li class="menuItem"><a href="#">About</a></li>

<li class="menuItem"><a href="#">News</a></li>

<li class="menuItem"><a href="#">Content</a></li>

</ul>

  

</nav>

<div id="main-content">

<section role="main">

<article>

<h2 id="greet">Welcome to my Homepage!</h2>

<button type="button" class="btn btn-warning">Add My Name</button>

  

<p class="ridge">This is my first time creating a website and it has been fun so far. My name is Abiodun Ogunwomoju and I am a Computer Information Systems (CIS) major. You will find some interest things about me here. My goal this semester is to learn how to create an advanced website without needing to watch a tutorial video. Someday,I hope to learn how to program with Java, C++, Swift, Ruby, Python and C.</p>

<strong>FEEL FREE TO EXPLORE AROUND!!<strong/>

</article>

  

<article>

<h2> My Favorite Band</h2>

<ol id="myList">

<li>The Beatles</li>

<li class="listItem">Imagine Dragons</li>

<li>Big Time Rush</li>

<li class="listItem">One Direction</li>

<li class="listItem">The Beatles</li>

</ol>

<button class="btn btn-warning" id="nirvana">Add Nirvana?</button>

<buttonclass="btn btn-warning" id="talented">Only talented bands?</button>

</article>

<article>

<h2>Interesting Things About Me</h2>

<ol>

<li> I am 19 years old.</li>

<li> I am Freshman/Junior.</li>

<li>I came to University of Houston with my Associates Degree.</li>

<li> I am eager to learn different types of programming language.</li>

<li> My favorite TV show is <em>Persons of Interest</em>

</ol>

</article>

</section>

<section>

<button class="btn btn-warning" id="console">Show Console Log</button>

</section>

<section>

<pre>

</pre>

</section>

</div>

<footer role="contentinfo">

</footer>  

</body>

</html>

js code:

var log = '<p>This is a message in the console log.</p>';

function showCopy() {

var d = new Date();

var year = d.getFullYear();

var month = d.getMonth();

Months= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var footer = document.getElementsByTagName('footer')[0];

var p = document.createElement('p');

p.innerHTML = '&copy; '+ (Months[month])+ ' '+year +' by Abiodun (Abby) Ogunwomoju. All Rights Reserved.';

footer.appendChild(p);

log += '<p> A paragraph has been added to the footer. </p>';

}

window.onload = showCopy;

function toggleMenu() {

var items = document.getElementsByClassName ('menuItem');

var icon = document.getElementById ('menuIcon');

if (items[0].style.display == 'block') {

for (var i=0;i<items.length;i++){

items[i].style.display = 'none';

}

icon.classList.remove('glyphicon-remove');

icon.classList.add('glyphicon-menu-hamburger');

icon.setAttribute ('aria-label','View Navigation');

} else {

for (var i=0;i<items.length;i++){

items[i].style.display = 'block';

}

icon.classList.remove('glyphicon-menu-hamburger');

icon.classList.add('glyphicon-remove');

icon.setAttribute('aria-label','Collapse Navigation');

}

}

function addNirvana() {

var item = document.createElement('li');

var nirvana = document.getElementById('nirvana');

item.innerHTML = 'Nirvana';

document.getElementById('myList').appendChild(item);

log += '<p>Nirvana added to the list!</p>';

nirvana.remove();

log += '<p>#nirvana has been removed from HTML.</p>';

var talented = document.getElementById('talented');

talented.style.display = 'block';

log += '<p>#talented is now visible.</p>';

}

function talentedBands() {

var list = document.getElementById('myList');

var listItems = list.getElementsByTagName('li');

for (var i=0; i<listItems.length; i++) {

if (!listItems[i].classList.contains('listItem')) {

listItems[i].style.display = 'none';

}

}

log += '<p>Boring bands removed!</p>';

var talented = document.getElementById('talented');

talented.style.display = 'none';

log += '<p>#talented is now hidden again.</p>';

}

function greetUser() {

var currHead = document.getElementById('greet');

var name = prompt('What's your name?','Enter your name here.');

if ((name == null) || (name == 'Enter your name here.') || (name == '')) {

name = 'Unknown';

}

currHead.innerHTML = 'Greetings, '+ name +'!';

log += '<p>'+ name +' has been greeted.</p>';

}

function showMssg() {

var message = document.getElementsByTagName('pre')[0];

var console = document.getElementById('console');

if (message.style.display == 'block') {

log += '<p>The log is now hidden.</p>';

message.style.display = 'none';

console.innerHTML = 'Show Console Log';

} else {

log += '<p>The log is now visible.</p>';

message.innerHTML = log;

message.style.display = 'block';

console.innerHTML = 'Hide Console Log';

}

}

Please test the code and let me know any issues. Thank you. All the best.

Related Questions

Navigate

• Browse (All)
• Browse I
• Subjects

---