Dantz Villas Dantz Villas - 2 months ago 9x
HTML Question

how to Change Multiple getElementById?

its working but the only the first get elementbyid is working i mean it is the only code that change the value of id.

This is my html

<li ><a href="#Home" id="activehome" onclick="load_home()">HOME</a></li>
<li ><a href="#Products" id="inactiveproducts" onclick="load_products()">PRODUCTS</a>

this is my script

function load_home(){
document.getElementById("content").innerHTML='<object class="slideshow" type="text/html" data="home.html" style="overflow:hidden; width: 100%; height:500px;" ></object>';

document.getElementById("inactivehome").id = "activehome";
document.getElementById("activeproducts").id = "inactiveproducts";
document.getElementById("activeservice").id = "inactiveservice";
document.getElementById("activeabout").id = "inactiveabout";
document.getElementById("activecontactus").id = "inactiveproducts";


You should probably rewrite your code a bit and use less repetition.

I wrote a more optimized version of your code using an active class to denote active menu items while keeping IDs of each item intact.

See how much cleaner does the HTML look like when you move all the JS event listeners away from it.

I used a general load page function which loads the proper content (which is stored as a property of the content variable) and sets the menu item, so no code is repeated.

Here is my example:

var pages = ['home', 'products', 'service', 'about', 'contactus'];

// add a click listener for each menu item
// instead of using onclick attributes 
for (var i = 0; i < pages.length; i++) {
  document.getElementById(pages[i]).addEventListener('click', function() {

// sets active class
function setActive(page) {
  for (var i = 0; i < pages.length; i++) {

// general page loading function
function loadPage(id) {
  // load specific content
  document.getElementById("content").innerHTML = content[id];
  // set active menu item

// content for each page below
var content = {
  home: '<object class="slideshow"  type="text/html" data="home.html" style="overflow:hidden; width: 100%;   height:500px;" ></object>',
  products: '<p>Products Content Here</p>',
  service: '<p>Services Content Here</p>',
  about: '<p>About Us Content Here</p>',
  contactus: '<p>Contact Us Content Here</p>'
a {
  text-decoration: none;
  color: black;
a.active, a:hover {
  color: green;
li {
  display: inline;
  margin: 0 10px;
#content {
  padding: 20px;
  border: 1px solid #aaa;
<li ><a href="#Home" id="home">HOME</a></li>
<li ><a href="#Products" id="products">PRODUCTS</a></li>
<li ><a href="#Service" id="service">SERVICE</a></li>
<li ><a href="#About" id="about">ABOUT</a></li>
<li ><a href="#Contactus" id="contactus">CONTACT US</a></li>
<div id="content"></div>