HTML/Script question

1

Any HTML guru here? I can’t seem to figure out how to make this function
more generic… as in I don’t want to “hardcode” ‘myPopup’ but rather somehow
pass the ID of the span to the function.

<script>
// When the user clicks on div, open the popup
function doPopup() {
  var popup = document.getElementById('myPopup');
  popup.classList.toggle('show');
}
</script>


<div class='popup' onclick="doPopup()">Click me to toggle the popup!
  <span class='popuptext' id='myPopup'>A Simple Popup!</span>
</div>

I tried this and it didn’t work

<script>
// When the user clicks on div, open the popup
function doPopup(id) {
  var popup = document.getElementById(id);
  popup.classList.toggle('show');
}
</script>


<div class='popup' onclick="doPopup('myPopup')">Click me to toggle the popup!
  <span class='popuptext' id='myPopup'>A Simple Popup!</span>
</div>

note : there is a bunch of CSS to format the popup etc… which I did not include here

2

See if this works. :slight_smile:

<html>
    <head>
        <script type="text/javascript">
            function myFunc(id)
            {
                alert(id);
            }
        </script>
    </head>

    <body>
        <button id="button1" class="MetroBtn" onClick="myFunc(this.id);">Btn1</button>
        <button id="button2" class="MetroBtn" onClick="myFunc(this.id);">Btn2</button>
        <button id="button3" class="MetroBtn" onClick="myFunc(this.id);">Btn3</button>
        <button id="button4" class="MetroBtn" onClick="myFunc(this.id);">Btn4</button>
    </body>
</html>```

From: https://stackoverflow.com/questions/17292176/pass-element-id-to-javascript-function
3

turns out… I was missing a ; in the onClick… which I noticed from your example!

1 Like
4

The dreaded semicolon!