'simple task javascript buttons in html

Can someone please help me make a button which prints thank you when clicked? I know there are lots of ways to do this but in my circumstance, I need to use an if statement and this has me totally stumped. I have not done much because I am totally unsure of what syntax to use. I have made a website for a school project and it has a form on one of the pages. It is a requirement to use javascript to do something with an if statement. I would like to have a button at the bottom of the form which does something to the page when clicked. I don't really mind what happens but I thought a thank you message would be nice.

Cheers :)

<!DOCTYPE html>
<html>

<body>
<button id="sub">Subscribe</button>
</body>

<script>
function button () {
    var message = document.getElementById("message");

    if (sub.onclicked == true) {
        /*Pop up with thank you*/
    };
};

button ();
</script>

</html>
javascripthtmlbutton


Solution 1:[1]

If you need if then you can test if button was clicked only once. But first thing is that you need an event that will fire when button is clicked, and document.getElementById value need to match you html id attribute.

function button () {
    var message = document.getElementById("sub");
    var cliked = false
    message.onclick = function() {
        if (!cliked) {
            cliked = true;
            alert('Thank you');
        }
    };
}

button();
<button id="sub">Subscribe</button>

Solution 2:[2]

The key issue here is you're trying to introduce code that has no use. For example here's how you add a message to the page when you click a button:

const button = document.querySelector('#sub');
const message = document.querySelector("#message");

button.addEventListener('click', handleClick, false);

function handleClick(event) {
  message.textContent = 'Hallo';
};
<button id="sub">Subscribe</button>
<div id="message" />

There's no room for an if statement here given the basic code example you have in your question. Your assignment may even be marked down if you start adding unnecessary code. That's why I suggested having a look at your requirements and changing them.

For example you might decide you want two buttons that give different messages when you click on them, using an if statement to differentiate between them:

// Because we have two buttons we use a class instead of an id
// and we can pick them up with `querySelectorAll`
const buttons = document.querySelectorAll('.sub');
const message = document.querySelector("#message");

// Instead of attaching one event listener to one element we
// loop over our buttons and attach an event listener to each one
buttons.forEach(button => button.addEventListener('click', handleClick, false));

function handleClick(event) {

  // We destructure the dataset id from the button that was clicked
  const { target: { dataset: { id } } } = event;

  // And we use an if statement to choose between two different messages
  if (id === 'msg1') message.textContent = 'Hallo';
  if (id === 'msg2') message.textContent = 'Secret message!';
};
<!-- Each button has its own data attribute -->
<button data-id="msg1" class="sub">Button 1</button>
<button data-id="msg2" class="sub">Button 2</button>
<div id="message" />

Further reading:

Solution 3:[3]

<button id="sub">Subscribe</button>
<script>
  document.getElementById("sub").addEventListener("click", () =>{
    document.write("thank you");
  });
</script>

or, if you don't want it to remove all your elements:

<button id="sub">Subscribe</button>
<p id="text"></p>
<script>
  document.getElementById("sub").addEventListener("click", () =>{
    document.getElementById("text").innerHTML = "thank you!";
  });
</script>

Solution 4:[4]

<!DOCTYPE html>
<html>

<body>
<button id="sub" onclick="button(event)">Subscribe</button>

<script>
function button(event) {
    var message = document.getElementById("message");

    if (event) {
        /*Pop up with thank you*/
         alert("Thank you");
    }
};
</script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 jcubic
Solution 2 Andy
Solution 3 xxxxxxxxxx
Solution 4 Oussama Jlassi

Related Questions