单击图像时如何更改innerHTML内容？

Question

I'm quite new in coding, trying to educate myself because i'm interested. So, sorry if it's going to be a bit dumb question or not so specific or not really correct...

On my "practicing site" i'm having some navigation links, which are referring to different innerHTML contents (like different pages). I used the 'onClick' event to make them show up, for example like this:

<div class="nav" onClick="changeNavigation('a')">menu</div>

It works with texts perfectly, but my problem is that i don't know how to make the same with an image. So when i click on the image, i want to be redirected to that innerHTML page, like i did it with the text based button. I tried to do it like these two ways, but none of them worked.

<img src="picture.png" onClick="changeNavigation('a')" />

<div onClick="changeNavigation('a')"><img src="picture.png"></div>

Is it possible to make this with an image and the 'onClick' event? Or how else can i make this work?

By the way this is my script to make innerHTML show up:

<script>
    function changeNavigation(id) {
        document.getElementById('main').innerHTML = document.getElementById(id).innerHTML
    }
</script>

I also tried to add my image an id that says 'main' like in the script this way, but with no result.

<img id="main" onClick="changeNavigation('f')" src="picture.png" />

Can you help me please? I would appreciate any answer, because i already searched about this and i didn't find anything that could've helped solve my problem and i'm really stuck right now.

(Sorry if my english isn't the best, it's not my native language.)

Answer 1

I have updated my answer to what you want. You need to the divs id you want to display as a parameter to the function you use for onclick. A sample is below.

 var divs = ["Menu1", "Menu2", "Menu3", "Menu4"]; var visibleDivId = null; function toggleVisibility(divId) { if(visibleDivId === divId) { visibleDivId = null; } else { visibleDivId = divId; } hideNonVisibleDivs(); } function hideNonVisibleDivs() { var i, divId, div; for(i = 0; i < divs.length; i++) { divId = divs[i]; div = document.getElementById(divId); if(visibleDivId === divId) { div.style.display = "block"; } else { div.style.display = "none"; } } } 

 .main_div{text-align:center; background: #00C492; padding:20px; width: 400px;} .inner_div{background: #fff; margin-top:20px; height: 100px;} .buttons a{font-size: 16px;} .buttons a:hover{cursor:pointer; font-size: 16px;} img {cursor:pointer} 

 <div class="main_div"> <div class="buttons"> <img src="http://www.clker.com/cliparts/J/g/2/D/p/I/one-hi.png" width="50px" onclick="toggleVisibility('Menu1');"> <img src="http://www.clker.com/cliparts/E/x/J/x/m/z/blue-number-two-hi.png" width="50px" onclick="toggleVisibility('Menu2');"> <img src="http://www.clker.com/cliparts/L/H/T/b/g/N/three-md.png" width="50px" onclick="toggleVisibility('Menu3');"> <img src="http://www.clker.com/cliparts/v/G/G/A/D/s/four-md.png" width="50px" onclick="toggleVisibility('Menu4');"> </div> <div class="inner_div"> <div id="Menu1">I'm container one</div> <div id="Menu2" style="display: none;">I'm container two</div> <div id="Menu3" style="display: none;">I'm container three</div> <div id="Menu4" style="display: none;">I'm container four</div> </div> </div> 

Answer 2

You can just keep all of the sections as children of #main , and selectively show them when the section button in clicked. Eg,

HTML

<nav>
  <button type="button" data-index=0>Show one</button>
    <button type="button" data-index=1>Show two</button>
    <button type="button" data-index=2>Show three</button>
</nav>
<main id="main">
  <section>One</section>
  <section class="hidden">Two</section>
  <section class="hidden">Three</section>
</main>

CSS

.hidden {
  display: none;
}

JavaScript

const buttons = Array.from(document.querySelectorAll('button'));
const contentBlocks = Array.from(document.querySelectorAll('section'));

function hideSections (arr) {
  arr.forEach(a => {
    a.classList.add('hidden');
  });
}

function showSection (index, sections) {
  // Just a basic check, not exhaustive by any stretch
  if (index !== undefined && sections !== undefined) {
    hideSections(sections);
    sections[index].classList.remove('hidden');
  }
}

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const contentBlocks = Array.from(document.querySelectorAll('section'));
    const index = button.getAttribute('data-index');
    showSection(index, contentBlocks);
  });
});

Obviously you'll have to adjust your selectors for your use case, but Here's a pen

Answer 3

Here's a GitHub Gist pointing to some examples I created on JSFiddle based off of your specific use case (Stack Overflow doesn't let me post links to JSFiddle directly without including code here, but it's easier to follow along/experiment entirely in JSFiddle):

https://gist.github.com/andresn/f100386f06ee28e35bd83c62d9219890

More advanced stuff:

Ideally, you'd use what's called event delegation instead of adding an onclick to every anchor (DRY = Don't Repeat Yourself is good to always keep in mind while programming and so is KISS = Keep It Simple Silly). Here is a resource explaining event delegation: https://davidwalsh.name/event-delegate

You can even take this further by preloading all your images so they load behind the scenes when the user first loads the page: https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/