Javascript function not running oninput() or onchange()

Question

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)
}

etherUnits.oninput = convert() <-- wrong, you are calling it and what it returns is assigned to the event. So in the end you have etherUnits.oninput = undefined. It should be etherUnits.oninput = convert — epascarello
– epascarello, Commented Oct 7, 2019 at 18:05
@epascarello I'm not entirely sure I understand. It should return a value derived from the values that were inputted into the converter. How can this be undefined? — vcable
– vcable, Commented Oct 7, 2019 at 18:07
because it is executing the function right then and there..... It is NOT calling it onchange/oninput. Simple console.log would show it. — epascarello
– epascarello, Commented Oct 7, 2019 at 18:08

Carlos Crespo · Accepted Answer · 2019-10-07 18:23:36Z

1

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

edited Oct 7, 2019 at 18:23

answered Oct 7, 2019 at 18:11

Carlos Crespo

2561 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mufaddal Hamid · Accepted Answer · 2019-10-07 18:11:46Z

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

Collectives™ on Stack Overflow

Javascript function not running oninput() or onchange()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related