JavaScript Tutorial | Simple Subscribe Function

This is a very basic function of subscribe button in JavaScript for Beginners to understand how a if statement works with JavaScript.

Get Chamod Dilshan 😎’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My website</title>

    <link rel="stylesheet" href="styles.css">

</head>
<body>

  
     <input type="checkbox"  id="myCheckBox">
    <label for="myCheckBox">Subscribe</label><br>

    <input type="radio" id="visaButton" name="card">
    <label for="visaButton">Visa</label>

    <input type="radio" id="MasterButton" name="card">
    <label for="MasterButton">Master</label>

    <input type="radio" id="PaypalButton" name="card">
    <label for="PaypalButton">Paypal</label>

    <button type="submit" id="submit">Submit</button>

    <p id="subResult"></p>
    <p id="paymentResult"></p>







    <script src="script.js"></script>
</body>
</html>

JavaScript

const myCheckBox = document.getElementById("myCheckBox");
const visaButton = document.getElementById("visaButton");
const MasterButton = document.getElementById("MasterButton");
const PaypalButton = document.getElementById("PaypalButton");
const submit = document.getElementById("submit");

const subResult = document.getElementById("subResult");
const paymentResult = document.getElementById("paymentResult");


submit.onclick = function(){

    if(myCheckBox.checked){
        if(visaButton.checked){
            subResult.textContent = `Subscribed`;
            paymentResult.textContent = `Payment done by Visa Card`;
        }

        if(MasterButton.checked){
            subResult.textContent = `Subscribed`;
            paymentResult.textContent = `Payment done by Master Card`;
        }

        if(PaypalButton.checked){
            subResult.textContent = `Subscribed`;
            paymentResult.textContent = `Payment done by Paypal`;
        }
    }
    else{
        subResult.textContent =  `Not Subscribed`;
    }
}

Follow For more.