I am writing a calculator for ADHD medication dosages. However, when I press “Convert!” I have to click it several times for the placeholder text to appear. What’s going on? Nothing I try seems to work but to be completely honest I have no idea what to do in this situation – please advise.
I tried changing onclick in the HTML tag to am event listener in JS but it has not helped.
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 = "Your new dose of Ritalin is 10mg."
} else if (dosages === "20mg") {
console.log("20mg")
placeholder.innerHTML = "Your new dose of Ritalin is 20mg."
} else if (dosages === "30mg") {
console.log("30mg")
placeholder.innerHTML = "Your new dose of Ritalin is 30mg."
} else if (dosages === "40mg") {
console.log("40mg")
placeholder.innerHTML = "Your new dose of Ritalin is 40mg."
} else if (dosages === "60mg") {
console.log("60mg")
placeholder.innerHTML = "Your new dose of Ritalin is 60mg."
} else if (toTheseMedictions === "Concerta") {
if (dosages = "10mg") {
console.log("36mg")
placeholder.innerHTML = "Your new dose of Concerta is 36mg."
} else if (dosages === "20mg") {
console.log("72mg")
placeholder.innerHTML = "Your new dose of Concerta is 72mg."
} else if (dosages === "30mg") {
console.log("108mg")
placeholder.innerHTML = "Your new dose of Concerta is 108mg"
} else if (dosages === "40mg") {
console.log("Warning! Dose exceeds maximum daily dose.")
placeholder.innerHTML = "Warning! Dose exceeds maximum daily dose."
} else if (dosages === "60mg") {
console.log("Warning! Dose exceeds maximum daily dose.")
placeholder.innerHTML = "Warning! Dose exceeds maximum daily dose."
}
} else if (toTheseMedications === "Dexamfetamine") {
if (dosages = "10mg") {
console.log("5mg")
placeholder.innerHTML = "Your new dose of Concerta is 5mg."
} else if (dosages === "20mg") {
console.log("10mg")
placeholder.innerHTML = "Your new dose of Concerta is 10mg."
} else if (dosages === "30mg") {
console.log("15mg")
placeholder.innerHTML = "Your new dose of Concerta is 15mg."
} else if (dosages === "40mg") {
console.log("20mg")
placeholder.innerHTML = "Your new dose of Concerta is 0mg."
} else if (dosages === "60mg") {
console.log("30mg")
placeholder.innerHTML = "30mg"
}
} else if (toTheseMedications === "Vyvanse") {
if (dosages = "10mg") {
console.log("20mg")
placeholder.innerHTML = "20mg"
} else if (dosages === "20mg") {
console.log("30mg")
placeholder.innerHTML = "30mg"
} else if (dosages === "30mg") {
console.log("40mg")
placeholder.innerHTML = "40mg"
} else if (dosages === "50mg") {
console.log("60mg")
placeholder.innerHTML = "60mg"
} else if (dosages === "60mg") {
console.log("70mg")
placeholder.innerHTML = "70mg"
}
}
}
} else if (toTheseMedications === "Ritalin LA") {
console.log("Error.")
placeholder.innerHTML = "Error."
}
}
function convertRitalin() {
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") {
if (toTheseMedications === "Ritalin LA") {
if (dosages === "5mg") {
console.log("10mg")
placeholder.innerHTML = "10mg"
} else if (dosages === "10mg") {
console.log("20mg")
placeholder.innerHTML = "20mg"
} else if (dosages === "30mg") {
console.log("60mg")
placeholder.innerHTML = "46mg"
} else if (dosages === "40mg") {
console.log("8mg")
placeholder.innerHTML = "80mg"
} else if (dosages === "50mg") {
console.log("100mg")
placeholder.innerHTML = "100mg"
}
} else if (toTheseMedications === "Concerta") {
if (dosages === "5mg") {
console.log("18mg")
placeholder.innerHTML = "18mg"
} else if (dosages === "10mg") {
console.log("36mg")
placeholder.innerHTML = "36mg"
} else if (dosages === "20mg") {
console.log("72mg")
placeholder.innerHTML = "72mg"
} else if (dosages === "30mg") {
console.log("108mg")
placeholder.innerHTML = "108mg"
} else if (dosages === "40mg") {
console.log("Warning! Dose exceeds maximum daily dose.")
placeholder.innerHTML = "Warning! Dose exceeds maximum daily dose."
}
} else if (toTheseMedications === "Dexamfetamine") {
if (dosages === "5mg") {
console.log("5mg")
placeholder.innerHTML = "5mg"
} else 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("38mg")
placeholder.innerHTML = "38mg"
} else if (dosages === "40mg") {
console.log("40mg")
placeholder.innerHTML = "40mg"
}
} else if (toTheseMedications === "Vyvanse") {
if (dosages === "5mg") {
console.log("20mg")
placeholder.innerHTML = "20mg"
} else if (dosages === "10mg") {
console.log("30mg")
placeholder.innerHTML = "30mg"
} else if (dosages === "20mg") {
console.log("50mg")
placeholder.innerHTML = "50mg"
} else if (dosages === "30mg") {
console.log("70mg")
placeholder.innerHTML = "70mg"
} else if (dosages === "40mg") {
console.log("Warning! Dose exceeds maximum daily dose.")
placeholder.innerHTML = "Warning! Dose exceeds maximum daily dose."
}
}
}
}
function convertDexamfetamine() {
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 === "Dexamfetamine") {
if (toTheseMedications === "Ritalin") {
if (dosages === "10mg") {
console.log("10mg")
placeholder.value = "10mg"
} else if (dosages === "20mg") {
console.log("20mg")
placeholder.value = "20mg"
} else if (dosages === "30mg") {
console.log("30mg")
placeholder.innerHTML = "30mg"
} else if (dosages === "40mg") {
console.log("40mg")
placeholder.innerHTML = "40mg"
} else if (dosages === "50mg") {
console.log("60mg")
placeholder.innerHTML = "50mg"
} else if (dosages === "60mg") {
console.log("60mg")
placeholder.innerHTML = "60mg"
}
}
if (toTheseMedications === "Ritalin LA") {
if (dosages === "10mg") {
console.log("20mg")
placeholder.innerHTML = "20mg"
} else if (dosages === "20mg") {
console.log("40mg")
placeholder.innerHTML = "40mg"
} else if (dosages === "30mg") {
console.log("60mg")
placeholder.innerHTML = "60mg"
} else if (dosages === "40mg") {
console.log("80mg")
placeholder.innerHTML = "80mg"
} else if (dosages === "50mg") {
console.log("100mg")
placeholder.innerHTML = "100mg"
} else if (dosages === "60mg") {
console.log("120mg")
placeholder.innerHTML = "120mg"
}
}
if (toTheseMedications === "Concerta") {
if (dosages === "10mg") {
console.log("36mg")
placeholder.innerHTML = "36mg"
} else if (dosages === "20mg") {
console.log("72mg")
placeholder.innerHTML = "72mg"
} else if (dosages === "30mg") {
console.log("108mg")
placeholder.innerHTML = "108mg"
} else if (dosages === "40mg") {
console.log("Warning! Dose exceeds maximum daily dose.")
placeholder.innerHTML = "Warning! Dose exceeds maximum daily dose."
} else if (dosages === "50mg") {
console.log("Warning! Dose exceeds maximum daily dose.")
placeholder.innerHTML = "Warning! Dose exceeds maximum daily dose."
} else if (dosages === "60mg") {
console.log("Warning! Dose exceeds maximum daily dose.")
placeholder.innerHTML = "Warning! Dose exceeds maximum daily dose."
}
}
if (toTheseMedications === "Vyvanse") {
if (dosages === "10mg") {
console.log("30mg")
placeholder.innerHTML = "30mg"
} else if (dosages === "20mg") {
console.log("50mg")
placeholder.innerHTML = "50mg"
} else if (dosages === "30mg") {
console.log("70mg")
placeholder.innerHTML = "70mg"
} else if (dosages === "40mg") {
console.log("Warning! Dose exceeds maximum daily dose.")
placeholder.innerHTML = "Warning! Dose exceeds maximum daily dose."
} else if (dosages === "50mg") {
console.log("Warning! Dose exceeds maximum daily dose.")
placeholder.innerHTML = "Warning! Dose exceeds maximum daily dose."
} else if (dosages === "60mg") {
console.log("Warning! Dose exceeds maximum daily dose.")
placeholder.innerHTML = "Warning! Dose exceeds maximum daily dose."
}
}
}
}
function convertConcerta() {
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 === "Concerta") {
if (toTheseMedications === "Ritalin") {
if (dosages == "18mg") {
console.log("5mg")
placeholder.innerHTML = "5mg"
} else if (dosages == "36mg") {
console.log("10mg")
placeholder.innerHTML = "10mg"
} else if (dosages == "54mg") {
console.log("15mg")
placeholder.innerHTML = "15mg"
}
if (dosages == "72mg") {
console.log("20mg")
placeholder.innerHTML = "20mg"
}
if (dosages == "108mg") {
console.log("30mg")
placeholder.innerHTML = "30mg"
}
}
}
if (toTheseMedications === "Ritalin LA") {
if (dosages == "18mg") {
console.log("10mg")
placeholder.innerHTML = "10mg"
} else if (dosages == "36mg") {
console.log("20mg")
placeholder.innerHTML = "20mg"
} else if (dosages == "54mg") {
console.log("30mg")
placeholder.innerHTML = "30mg"
} else if (dosages == "72mg") {
console.log("40mg")
placeholder.innerHTML = "40mg"
} else if (dosages == "108mg") {
console.log("50mg")
placeholder.innerHTML = "50mg"
}
}
if (toTheseMedications === "Dexamfetamine") {
if (dosages === "18mg") {
console.log("5mg")
placeholder.innerHTML = "5mg"
} else if (dosages === "36mg") {
console.log("10mg")
placeholder.innerHTML = "10mg"
} else if (dosages === "54mg") {
console.log("15mg")
placeholder.innerHTML = "15mg"
} else if (dosages === "72mg") {
console.log("20mg")
placeholder.innerHTML = "20mg"
} else if (dosages === "108mg") {
console.log("25mg")
placeholder.innerHTML = "25mg"
}
}
if (toTheseMedications === "Vyvanse") {
if (dosages === "18mg") {
console.log("20mg")
placeholder.innerHTML = "20mg"
} else if (dosages === "36mg") {
console.log("30mg")
placeholder.innerHTML = "30mg"
} else if (dosages === "54mg") {
console.log("40mg")
placeholder.innerHTML = "40mg"
} else if (dosages === "72mg") {
console.log("50mg")
placeholder.innerHTML = "50mg"
} else if (dosages === "108mg") {
console.log("70mg")
placeholder.innerHTML = "70mg"
}
}
}
function concvertVyvanse() {
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 === "Vyvanse") {
if (toTheseMedications === "Ritalin") {
if (dosage === "20mg") {
console.log("10mg")
} else if (dosage === "30mg") {
console.log("15mg")
placeholder.innerHTML = "15mg"
} else if (dosage === "40mg") {
console.log("20mg")
placeholder.innerHML = "20mg"
} else if (dosage === "50mg") {
console.log("25mg")
placeholder.innerHML = "25mg"
} else if (dosage === "60mg") {
console.log("30mg")
placeholder.innerHML = "30mg"
} else if (dosage === "70mg") {
console.log("35mg")
placeholder.innerHML = "35mg"
}
}
}
}
function init() {
const button = document.getElementById("button");
button.addEventListener("click", myFunction);
function myFunction() {
if (document.getElementById("convertMedications").value === "Ritalin LA") {
document.getElementById("button").onclick = convertRitalinLA;
}
if (document.getElementById("convertMedications").value === "Ritalin") {
document.getElementById("button").onclick = convertRitalin;
}
if (document.getElementById("convertMedications").value === "Dexamfetamine") {
document.getElementById("button").onclick = convertDexamfetamine;
}
if (document.getElementById("convertMedications").value === "Concerta") {
document.getElementById("button").onclick = convertConcerta;
}
if (document.getElementById("convertMedications").value === "Vyvanse") {
document.getElementById("button").onclick = convertVyvanse;
}
}
}
window.onload = init;<div id="header">
<img src="flag.png" alt="Australian flag." width="150" height="75">
<h1>The Australian ADHD Medication Calculator</h1>
<p>This calculator will only convert medications that are available for sale in Austraia. Unlike other, US based calculators, you won't have to scroll through a whole list of medications with strange names. Also, you using this calculator means a lot to
its (Aussie) creator!
</p>
</div>
<div id="convert">
<h3>I want to convert...</h3>
<form id="medications">
<label for="convertMedications"></label>
<select name="convertMedications" id="convertMedications">
<option value="Ritalin">Ritalin</option>
<option value="Ritalin LA">Ritalin LA</option>
<option value="Concerta">Concerta</option>
<option value="Dexamfetamine">Dexamfetamine</option>
<option value="Vyvanse">Vyvanse</option>
</select>
<label for="dosages"></label>
<select name="dosages" id="dosages">
<option value="5mg">5mg</option>
<option value="10mg">10mg</option>
<option value="18mg">18mg</option>
<option value="20mg">20mg</option>
<option value="27mg">27mg</option>
<option value="30mg">30mg</option>
<option value="36mg">36mg</option>
<option value="40mg">40mg</option>
<option value="50mg">50mg</option>
<option value="54mg">54mg</option>
<option value="60mg">60mg</option>
<option value="70mg">70mg</option>
</select>
</form>
</div>
<div id="toThese">
<h3>to</h3>
<form>
<label for="toTheseMedications"></label>
<select name="toTheseMedications" id="toTheseMedications">
<option value="Ritalin">Ritalin</option>
<option value="Ritalin LA">Ritalin LA</option>
<option value="Concerta">Concerta</option>
<option value="Dexamfetamine">Dexamfetamine</option>
<option value="Vyvanse">Vyvanse</option>
</select>
<button id="button" type="button" onclick=init()>Convert!</button>
</form>
<p id="placeholder"></p>
</div>