javaScript got stuck with converting bytes

Question

so I've got a bit of the problem. I am trying to make a function in wich : human clicks on input box with mouse and types some random numbers in bytes and that number should be convert and shown in two other boxes such as MegaBytes and KiloBytes. So my problem is that Javascript shows me error :

Cannot set property 'value' of null
at convert (script.js:7)
at HTMLInputElement.onkeyup

here is my code so far:

function convert(inputas)
{
    var i;
    if(inputas == "B")
    {
        i = document.getElementById("baitas").value / 1000;
        document.getElementById("kiloBaitas").value = i;
    }
    else if(inputas == "KB")
    {
        i = document.getElementById("kiloBaitas").value * 1024;
        document.getElementById("baitas").value = i.toFixed(2);
    }
}

HTML code:

<input type="text" id="baitas" onkeyup="convert('B')placeholder="Bits">
<input type="text" id="kilobaitas"     
`onkeyup="convert('KB')"placeholder="Kilobits">
 <input type="text" id="megabaitas" onkeyup="convert('MB')" 
placeholder="Mbits">
<script src="script.js"></script>

When this script runs, there is no element present in the document with ID `kiloBaitas` or `baitas` (depending on the `inputas` value) — Phil, Mar 13 '17 at 23:34
Why do you want to reinvent ...There is a library for the same fileSize.js https://filesizejs.com/ — Geeky, Mar 13 '17 at 23:40
@Geeky is it jquery library ? because I whant to do it in pure javaScript — Lucas, Mar 13 '17 at 23:42
Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/q/14028959/218196) — Felix Kling, Mar 13 '17 at 23:44

score 1 · Accepted Answer · answered Mar 13 '17 at 23:42

1

when comparing your javascript with the html. the kilobaitis element is not spelt with a consistent case.

answered Mar 13 '17 at 23:42

Stephen Quan

15,118
3
69
63

score 1 · Answer 2 · answered Mar 13 '17 at 23:43

1

JavaScript is case sensitive.

function convert(inputas) {
  var i;
  if (inputas == "B") {
    i = document.getElementById("baitas").value / 1000;
    document.getElementById("kilobaitas").value = i;
  } else if (inputas == "KB") {
    i = document.getElementById("kiloBaitas").value * 1024;
    document.getElementById("baitas").value = i.toFixed(2);
  }
}

<input type="text" id="baitas" onkeyup="convert('B')" placeholder=" Bits ">
<input type="text " id="kilobaitas" onkeyup="convert('KB')" placeholder="Kilobits ">
<input type="text " id="megabaitas" onkeyup="convert('MB')" placeholder="Mbits ">

answered Mar 13 '17 at 23:43

kind user

32,209
6
49
63

yeah , mate just seen it , after long 12h , I am such a sleeping beauty , that I didnt noticed my spelling was incorrect, thank you , mate :) – Lucas Mar 13 '17 at 23:46
cha.. you too , buddy ;) – Lucas Mar 13 '17 at 23:52

MypKOT-1992 · Answer 3 · 2017-03-14T03:00:19.760

(function() {

var elems = [],
    elemsId = ['baitas','kilobaitas','megabaitas'];

function fix(a){ return ( a * 100 | 0 ) / 100  }

function convert(inputas)
{
    var i;
    switch(inputas)
    {
        case 0:
            i = elems[0].value;
            elems[1].value = fix( i / 1024 );
            elems[2].value = fix( i / 1048576 );
            break;
        case 1:
            i = elems[1].value;
            elems[0].value = i * 1024;
            elems[2].value = fix( i / 1024 );
            break;
        case 2:
            i = elems[2].value;
            elems[0].value = i * 1048576;
            elems[1].value = i * 1024;
            break;
    }
}

for (var i=0; i < elemsId.length; i++)
{
    elems[i] = document.getElementById( elemsId[i] );
    elems[i].addEventListener('keyup', convert.bind(null, i) )
}

}());

<input type="text" id="baitas" placeholder=" Bits">
<input type="text" id="kilobaitas" placeholder=" Kilobits">
<input type="text" id="megabaitas" placeholder=" Mbits">

javaScript got stuck with converting bytes

3 Answers3