getelementbyid to load pages in iframe

Question

does anyone know how to make a button in HTML load another HTML page inside of an iframe?

I don't understand online tutorials for this, and here's what I tried :

    <div class="flex-container"> <!-- la sidebar et le iframe seront dedans -->
       
        <div class="sidebar">
            <button style="margin-top: 100px;" onclick="Function1">Thés</button>

            <button>Tisanes</button> 

            <button>Théières</button>
        </div>
        
<!--FUNCTION1-->

<script>
    function Function1() {
      document.getElementById(src="accueil.html").innerHTML = src="Thés.html" TARGET="iframe";
    }
</script>
        
        <iframe src="accueil.html" frameborder="0" style="border: none; width: inherit; height: 710px; id="iframe">
        </iframe>

    </div>


</body>
</html>

Is this even how it's supposed to be done? Cause nothing is happening when the button Thés is clicked. I'm quite new and I'm bad with javascript. Thanks if anyone has the patience to explain this to me.

https://stackoverflow.com/questions/3730159/changing-iframe-src-with-javascript — epascarello, Sep 21 '20 at 02:08
Why do you use js? It is HTML `click` if you need more details remove js getElementById from title. — black blue, Sep 21 '20 at 02:17
This other question is really advanced and I don't understand how I can translate this to my page sorry, also I added the () and still not working, I think my function is wrong — manouna, Sep 21 '20 at 02:17
blackblue, I want a button to display Thés.html in the iframe when clicked, how do I do this without getelementbyid with an href? Thank you — manouna, Sep 21 '20 at 02:19
@blackblue okay so it worked, the page is loading, but putting the button inside the like this basically cancelled all of the button's styling. here's what that button looks like now : https://zupimages.net/viewer.php?id=20/39/dh2x.png — manouna, Sep 21 '20 at 02:27

score 1 · Accepted Answer · answered Sep 21 '20 at 02:32

  <div class="sidebar">
      <button style="margin-top: 100px;" onclick="Function1()">Thés</button>

      <button>Tisanes</button> 

      <button>Théières</button>
  </div>

  <iframe src="./accueil.html" frameborder="0" style="border: none; width: inherit; height: 710px;" id="iframe">
  </iframe>

  
<!--FUNCTION1-->

<script>

function Function1() {
 const iFrame = document.getElementById('iframe');
 iFrame.src = "Thes.html";
 console.log(iFrame)
}
</script>

Omg thank you so much you're like saving me. Now it seems so evident. It works 100% — manouna, Sep 21 '20 at 02:36

getelementbyid to load pages in iframe

1 Answers1