Html Question posted in
Some basic documentation can be found here.

Html – Nothing appears when using onclick

I’m trying to build a simple ADD medication calculator, based on the meds available in my country. I haven’t gotten very far with writing the script yet, as nothing appears when I select "Ritalin LA", "10mg" and "Ritalin" then click convert. Why is this and how might I fix it?

Here’s the code:

function convertRitalinLA () {
    var convertMedications = document.getElementById("convertMedications").value;
    var dosages = document.getElementById("dosages").value;
    var toTheseMedications = document.getElementById("toTheseMedications").value;
    var placeholder = document.getElementById("placeholder");

    if (convertMedications === "Ritalin LA") {
        if (toTheseMedications === "Ritalin") {
            if (dosages === "10mg") {
                console.log("10mg")
                placeholder.innerHTML = "10mg"
            } else if (dosages === "20mg") {
                console.log("20mg")
                placeholder.innerHTML = "20mg"
            } else if (dosages === "30mg") {
                console.log("30mg")
                placeholder.innerHTML = "30mg"
            } else if (dosages === "40mg") {
                console.log("40mg")
                placeholder.innerHTML = "40mg"
            } else if (dosages === "60mg") {
                console.log("60mg")
                placeholder.innerHTML = "60mg"
            }
        } else if (toTheseMedications === "Ritalin LA") {
            console.log("Error.")
            placeholder.innerHTML = "Error."
        }
    }
}

function init () {
    document.getElementById("button").onclick = convertRitalinLA()
}

window.onload = init;

I tried changing around the if statement and also changing the original submit input "button" to a real button.

Tags:

2

Answers


  1. 0

    you need to add a EventListener to your buttom :

    document.getElementById("test").addEventListener("click", () => {
console.log("clicked")
//call your function here...
})

    "test" is de id of your Html element , it’s can be anything.
    "click" : is de event that you need to call

    Login or Signup to reply.
  2. 0

    As mentioned in the comments, simply remove your invocation of the convertRitalinLA function. You should only store a reference to the function, it will be invoked when the button is clicked;

    function init () {
    document.getElementById("button").onclick = convertRitalinLA;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search