JavaScript parseFloat Demo

by Adi Jaya

HTML

<ol>

    <li>
        <input id="input-1" value="10">
        <span id="output-1"></span><br>
        <button onclick="checkParseFloat( 'input-1', 'output-1' )">Run</button>
    </li>
    
    <li>
        <input id="input-2" value="10 lorem 12345 lorem">
        <span id="output-2"></span><br>
        <button onclick="checkParseFloat( 'input-2', 'output-2' )">Run</button>
    </li>
    
    <li>
        <input id="input-3" value="10.55555555">
        <span id="output-3"></span><br>
        <button onclick="checkParseFloat( 'input-3', 'output-3' )">Run</button>
    </li>
    
     <li>
        <input id="input-4" value="^%#&%&^%^%1231">
        <span id="output-4"></span><br>
        <button onclick="checkParseFloat( 'input-4', 'output-4' )">Run</button>
    </li>
    
    <li>
        <input id="input-5" value="1234^%#&%&^%^%5678">
        <span id="output-5"></span><br>
        <button onclick="checkParseFloat( 'input-5', 'output-5' )">Run</button>
    </li>
</ol>

CSS

li {
    margin-bottom: 1em;
}

JavaScript

function checkParseFloat( $inputID, $outputID ) {

	var input 	= document.getElementById( $inputID );
    var output 	= document.getElementById( $outputID );
    
    var result = parseFloat( input.value );
    //alert( result );
    
    output.innerHTML = result;
    
}