Zwracanie funkcji w js

Question

    Kontrast: <input type="number" id="kontrast" onblur="kontrast()" />
    Szarosc: <input type="number" id="szarosc" />
    jasnosc <input type="number" id="jasnosc" />
    
    <span id="m"></span>
    
    <script>
    
        
        
        function kontrast(){
           var a= document.getElementById("kontrast").value;
           return a
           
        }
        
        document.getElementById("m").innerHTML=kontrast();
        
        
    </script>

Problem polega na tym, że żadna wartość tej funkcji nie pojawia się, natomiast, jeśli wypisze w tej funkcji wypisuje poprawną wartość, wie ktoś jak temu zaradzić ??

Answer 1

Musisz ustawić wartość początkową dla value.

Kontrast: <input type="number" id="kontrast" value="0" onblur="kontrast()" />
Szarosc: <input type="number" id="szarosc" value="0" />
jasnosc <input type="number" id="jasnosc" value="0" />

 

Comments

Kontrast: <input type="number" id="kontrast" value="0" onblur="kontrast()" />
Szarosc: <input type="number" id="szarosc" value="0" />
jasnosc <input type="number" id="jasnosc" value="0" />

<span id="m"></span>

<script>
    window.onload = function() {
        // Pierwsze wywołanie funkcji kontrast()
        //  dopiero gdy cała strona jest załadowana 
        kontrast();
    }

    function kontrast() {
        let a = document.getElementById("kontrast").value;
        document.getElementById("m").innerHTML = a;
    }
</script>

[ <input type="number"> ]

---

A taki bonusik, ... 

Kontrast: <input type="number" id="kontrast" value="0" min="0" max="255" />
Szarosc: <input type="number" id="szarosc" value="0" min="0" max="255" />
Jasnosc: <input type="number" id="jasnosc" value="0" min="0" max="255" />

<span id="m"></span>

<style>
    input:not([type]), input[type="number"] {
        width: 50px;
    }
    span {
        font-weight: bold;
        font-size: 18px;
    }
    span i {
        font-weight: normal;
        font-style: normal;
        font-size: 12px;
    }
    span i:nth-child(1) {
        color: red;
    }
    span i:nth-child(2) {
        color: green;
    }
    span i:nth-child(3) {
        color: blue;
    }
</style>

<script>
    let  k, s, j;

    window.onload = function() {

        k = document.getElementById("kontrast").value;
        s = document.getElementById("szarosc").value;
        j = document.getElementById("jasnosc").value;

        const input1 = document.getElementById("kontrast");
        input1.addEventListener('change', ({target}) => {
            m(target.id, target.value);
        });
        input1.addEventListener('input', ({target}) => {
            m(target.id, target.value);
        });


        const input2 = document.getElementById("szarosc");
        input2.addEventListener('change', ({target}) => {
            m(target.id, target.value);
        });
        input2.addEventListener('input', ({target}) => {
            m(target.id, target.value);
        });

        const input3 = document.getElementById("jasnosc");
        input3.addEventListener('change', ({target}) => {
            m(target.id, target.value);
        });
        input3.addEventListener('input', ({target}) => {
            m(target.id, target.value);
        });
    }

    function m(id, value) {
        if(value == "") value = 0;

        switch(id) {
            case "kontrast":
                k = value;
            break;
            case "szarosc":
                s = value;
            break;
            case "jasnosc":
                j = value;
            break;
        }

        value = `[ <i>${k}</i> ] [ <i>${s}</i> ] [ <i>${j}</i> ]`;
        document.getElementById("m").innerHTML = value;
    }
</script>

---

@VBService, Super, bardzo dziękuję :)

---

@VBService, nie ma potrzeby czekania na load, zwłaszcza jeśli kod JS jest pod elementami, których dotyczy.