CODEWITHSUNDEEP
javascripthtml
Alan
Alan

Reputation: 1265

Passing parameters in Javascript and html

In the code below I need to toggle the text for the three buttons between "Show" and "A", "B",C" when clicked. With the current code, nothing happens when the buttons are clicked.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

<style>
.placeholder {
    padding: 0 0 0 5px;
}
</style>


<script>

function mFunction() {
document.querySelectorAll('[data-placeholder]')].forEach( item => {
  item.addEventListener('click', () => {
      var x = item.querySelector('.placeholder');
      x.innerHTML = x.innerHTML === "" ? item.dataset.placeholder : "";
  });
});

</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>

</head>

<body>
<p>

<button onclick="mFunction()" data-placeholder="A">Show<span class="placeholder"></span></button>
<p>
<button onclick="mFunction()" data-placeholder="B">Show<span class="placeholder"></span></button>
<p>
<button onclick="mFunction()" data-placeholder="C">Show<span class="placeholder"></span></button>


</body>
</html>

Upvotes: 1

Views: 63

Answers (4)

linchong
linchong

Reputation: 483

your code has some error, here is the right code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

    <style>
        .placeholder {
            padding: 0 0 0 5px;
        }
    </style>


    <script>

        function mFunction() {
            // Your error code:      ('[data-placeholder]')].forEach
            document.querySelectorAll('[data-placeholder]').forEach(item => {
                item.addEventListener('click', () => {
                    var x = item.querySelector('.placeholder');
                    x.innerHTML = x.innerHTML === "" ? item.dataset.placeholder : "";
                });
            });
        } // Your code is missing this }
    </script>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>

</head>

<body>
    <p>

        <button onclick="mFunction()" data-placeholder="A">Show<span class="placeholder"></span></button>
    <p>
        <button onclick="mFunction()" data-placeholder="B">Show<span class="placeholder"></span></button>
    <p>
        <button onclick="mFunction()" data-placeholder="C">Show<span class="placeholder"></span></button>


</body>

</html>

Upvotes: 1

Nick
Nick

Reputation: 147146

Your issue is that you're using mFunction to assign an event handler, but it is being called when the event has already occurred. If you want to keep your code essentially the same, you can just rewrite mFunction as the event handler, and pass the clicked element to it as a parameter:

function mFunction(o) {
  let ph = o.querySelector('.placeholder');
  if (ph.innerText == 'Show') {
    ph.innerText = o.getAttribute('data-placeholder');
  } else {
    ph.innerText = 'Show';
  }
}
.placeholder {
  padding: 0 0 0 5px;
}
<body>
  <p>
    <button onclick="mFunction(this)" data-placeholder="A"><span class="placeholder">Show</span></button>
  </p>
  <p>
    <button onclick="mFunction(this)" data-placeholder="B"><span class="placeholder">Show</span></button>
  </p>
  <p>
    <button onclick="mFunction(this)" data-placeholder="C"><span class="placeholder">Show</span></button>
  </p>
</body>

Upvotes: 1

see sharper
see sharper

Reputation: 12025

You do not need to put the onClicks on the buttons, since the function already attaches them. Put the script after the body so that the document has loaded before attaching the event handlers, and run the mFunction to attach the handlers on load:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

<style>
.placeholder {
    padding: 0 0 0 5px;
}
</style>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>

</head>

<body>
<p>
<button data-placeholder="A">Show<span class="placeholder"></span></button>
</p>
<p>
<button data-placeholder="B">Show<span class="placeholder"></span></button>
</p>
<p>
<button data-placeholder="C">Show<span class="placeholder"></span></button>
</p>
</body>
<script>

(function mFunction() {
  document.querySelectorAll('[data-placeholder]').forEach(item => {
    item.addEventListener('click', () => {
      var x = item.querySelector('.placeholder');
      x.innerHTML = x.innerHTML === "" ? item.dataset.placeholder : "";
    });
  });
})();


</script>
</html>

Also cleaned up the invalid HTML...

Upvotes: 1

Mamun
Mamun

Reputation: 68933

There are several issue in your code:

  1. You should not use inline event handler since you are using addEventListener() to attach the event.

  2. You also should palce the script either at the bottom of the body tag or wrap the code with DOMContentLoaded.

  3. You also have a typo in .querySelectorAll('[data-placeholder]')] (extra ]) causes syntax error.

  4. I will also suggest you use innerText or textContent instead of innerHTML when the content is text (no HTML). It is also better to trim the text before comparison.

Try the following way:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
  <head> 

    <style>
    .placeholder {
        padding: 0 0 0 5px;
    }
    </style>


    <script>
    window.addEventListener('DOMContentLoaded', (event) => {
      document.querySelectorAll('[data-placeholder]').forEach( item => {
        item.addEventListener('click', () => {
          var x = item.querySelector('.placeholder');
          x.textContent = x.textContent.trim() === "" ? item.dataset.placeholder : "";
        });
      });
    });
    </script>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
  </head>

  <body>
    <p>
      <button data-placeholder="A">Show<span class="placeholder"></span></button>
    <p>
      <button data-placeholder="B">Show<span class="placeholder"></span></button>
    <p>
      <button data-placeholder="C">Show<span class="placeholder"></span></button>

  </body>
</html>

Upvotes: 2

Related Questions