My JavaScript pixel-drawing function cannot accept a width value of more than 9

Question

The width cannot be a two- or more-digit number, limiting it to only 1-9. Can you please figure out why my code won't accept two-digit numbers?

/*pixelPrint() is a function that allows you to print pixel art from specified data in a new format. This programming language is parsed into JavaScript and executed as so. You may take this function, but keep the credits.*/
function pixelPrint(indata){
    /*
    *           The Flux Brothers
    *       Major_Flux and Minor_Flux
    *           June 2021 product
    *           pixelPrint 1.0
    *
    * Free license use only if these credits are
    * included in this product. Removal of credits
    * will void your free license of use until you
    * return an exact copy of this license to this
    * product. You may grab this out of anyone's
    * project as long as they have this license on
    * it and they didn't tinker with the code.
    *
    * Do not tinker with the code or you will null
    * its ability to function assuming it does at
    * all with your setup. Email Major_Flux or any
    * person who knows him if you want to tinker
    * with the code if your setup doesn't allow it
    * to work so that a cross-browser/OS fix can be
    * put up for others to benefit from.
    */
    try{
        var colors = indata.split(";");
        var sizeData = colors[0];
        var pixWidth;
        var pixHeight;
        if(sizeData.indexOf("*") == 1){
            pixWidth = sizeData.split("*")[0];
            pixHeight = sizeData.split("*")[1];
        }else{
            return("<p style='color: #ff0000'>Error: size data not valid</p>");
        }
        if(pixWidth.indexOf(" ") > 0 || pixHeight.indexOf(" ") > 0){
            return("<p style='color: #ff0000'>Error: size data have spaces in them</p>");
        }
        var internals = "";
        var colorKey = 0;
        for(var y = 0; y < pixHeight; y++){
            internals = internals + "<tr>";
            for(var x = 0; x < pixWidth; x++){
                colorKey++;
                internals = internals + "<td style='background: " + colors[colorKey] + "; width: 5px; height: 5px; display: inline-block;'></td>";
            }
            internals = internals + "</tr>";
        }
        var outdata;
        if(internals != "" && internals != null && internals != undefined && internals.indexOf("<") >= 0){
            outdata = "<table cellSpacing='0px' class='pixelboard'>" + internals + "</table>";
        }else{
            outdata = "<p style='color: #ff0000'>Error: var internals is somehow empty</p>";
        }
        if(outdata != indata){
            return(outdata);
        }else{
            throw("Data was not processed");
        }
    }catch(err){
        alert(err);
    }
}

<p>This HTML is not part of any of the problem, just the JS. This HTML is to display what it does.</p>
<p>Usage: <code>[width]*[height];color;color...</code></p>
<p>Example: <code>2*2;#dddddd;#aaaaaa;#aaaaaa;#777777</code>, produces a 2 by 2 square with a pixelated outset effect to it.</p>
<p>Try it out below:</p>
<input id="code" type="text"/><button onclick="document.getElementById('result').innerHTML = pixelPrint(document.getElementById('code').value);">Try</button>
<div id="result">

</div>
<p>Do not worry about the chopped up rows, I am sure you can find a CSS-based fix when you put the free function on your website.</p>

Answer 1

if(sizeData.indexOf("*") == 1)

this will only trigger if the * is the second character in the string, ie if there is only one digit.

Instead try

if(sizeData.indexOf("*") !== -1)

(trigger if a * is found anywhere in the string)