CODEWITHSUNDEEP
javascripthtmldom
vcable
vcable

Reputation: 509

Javascript function not running oninput() or onchange()

I'm building a simple app that converts Ether to its various units. I have it set up so that when a number is entered into the input box, my convert function runs and displays the conversion to the desired unit (which can be selected in a drop-down list).

The issue that I'm having is that the function only runs when the page loads. After this, no matter what I input, the displayed conversion value does not change from the default, even though I have the convert function set to run oninput, onchange, and onclick in relation to the HTML elements that accept the data.

I made sure that my script runs AFTER the page is fully loaded by putting it at the very bottom of the HTML file, but this didn't help at all.

HTML:

<div id="conversions">
           <p>
                 <input type="number" id="etherAmount" value="2"> ether to <select id="etherUnits">
                    <option id="wei" value="wei">Wei</option>
                    <option id="mwei" value="mwei">Mwei/Lovelace/Picoether</option>
                    <option id="gwei" value="gwei">Gwei/Shannon/Nanoether/Nano</option>
                    <option id="szabo" value="szabo">Szabo/Microether/Micro</option>
                    <option id="finney" value="finney">Finney/Milliether/Milli</option>
                    <option id="ether" value="ether">Ether</option>
                    <option id="kether" value="kether">Kether/Grand</option>
                    <option id="mether" value="mether">Mether</option>
                    <option id="gether" value="gether">Gether</option>
                    <option id="tether" value="tether">Tether</option>
                    <input type="submit" value="Convert" id="convert">
                </select>
            </p>

        </div>
        <div id="resultsContainer">
            <p id="results"></p>
        </div>

JS:

const converter = require("ethereumjs-units")
let etherUnits = document.getElementById("etherUnits")
let etherAmount = document.getElementById("etherAmount")
let convertButton = document.getElementById("convert")
let results = document.getElementById("results")


etherUnits.oninput = convert()
etherAmount.onchange = convert()
etherAmount.oninput = convert()
convertButton.onclick = convert()
//Takes value of ether input box and converts it
function convert() {

    //value of "convert to" box
    let etherUnitVal = etherUnits.options[etherUnits.selectedIndex].value
    results.innerHTML = converter.lazyConvert(etherAmount.value.toString() + " eth", etherUnitVal)
}

Upvotes: 1

Views: 522

Answers (2)

Carlos Crespo
Carlos Crespo

Reputation: 256

I guess your problem here is that you are instead of assigning a function to be executed by those event handler, you are executing the function and since convert() does not return a function, nothing will be done by the handlers

Try

etherUnits.oninput = convert

Upvotes: 1

Mufaddal Hamid
Mufaddal Hamid

Reputation: 357

You could try this this is working.

HTML:

<div id="conversions">
    <p>
        <input type="number" id="etherAmount" value="2" onchange="covert()"> ether to <select id="etherUnits"
            oninput="convert()">
            <option id="wei" value="wei">Wei</option>
            <option id="mwei" value="mwei">Mwei/Lovelace/Picoether</option>
            <option id="gwei" value="gwei">Gwei/Shannon/Nanoether/Nano</option>
            <option id="szabo" value="szabo">Szabo/Microether/Micro</option>
            <option id="finney" value="finney">Finney/Milliether/Milli</option>
            <option id="ether" value="ether">Ether</option>
            <option id="kether" value="kether">Kether/Grand</option>
            <option id="mether" value="mether">Mether</option>
            <option id="gether" value="gether">Gether</option>
            <option id="tether" value="tether">Tether</option>
            <input type="submit" value="Convert" id="convert" onclick="convert()">
        </select>
    </p>

</div>
<div id="resultsContainer">
    <p id="results"></p>
</div>

JS:

    const converter = require("ethereumjs-units")
    let etherUnits = document.getElementById("etherUnits")
    let etherAmount = document.getElementById("etherAmount")
    let convertButton = document.getElementById("convert")
    let results = document.getElementById("results")

    //Takes value of ether input box and converts it
    function convert() {

        //value of "convert to" box
        let etherUnitVal = etherUnits.options[etherUnits.selectedIndex].value
        results.innerHTML = converter.lazyConvert(etherAmount.value.toString() + " eth", etherUnitVal)
    }

I simply changed and added oninput,onchange to respective blocks instead of in js

Upvotes: 0

Related Questions