@satachito/jp-formula/_.html

Formula input WebComponents

<style>
jp-formula > input {
;	border:	1px solid red
}
</style>

FORMULA:<br>
<jp-formula id=FORMULA></jp-formula>
<input type=button value=Eval id=EVAL>
<span id=RESULT_FORMULA></span>
<br>
<br>

FUNCTION: @ means argument<br>
<input value=3 id=ARGUMENT style="width: 32px">
<jp-formula id=FUNCTION></jp-formula>
<input type=button value=Apply id=APPLY>
<span id=RESULT_FUNCTION></span>
<br>
<br>

BAD SYNTAX:<br>
<jp-formula id=FORMULA_X></jp-formula>
<input type=button value=Eval id=EVAL_X>
<span id=RESULT_FORMULA_X></span>
<br>
<br>

<script type=module>

import './_.js'

FORMULA.value = '2 * ( 3 + 4 ) / 5'
EVAL.onclick = _ => {
	try {
		RESULT_FORMULA.textContent = FORMULA.Eval()
	} catch ( ex ) {
		alert( 'Not a valid formula\n' + ex.join( '\n' ) )
	}
}

FUNCTION.value = '@ * 2'
APPLY.onclick = _ => {
	try {
		RESULT_FUNCTION.textContent = FUNCTION.Apply( Number( ARGUMENT.value ) )
	} catch ( ex ) {
		alert( 'Not a valid formula\n' + ex.join( '\n' ) )
	}
}

FORMULA_X.value = 'abc'
EVAL_X.onclick = _ => {
	try {
		RESULT_FORMULA_X.textContent = FORMULA_X.Eval()
	} catch ( ex ) {
		alert( 'Not a valid formula\n' + ex.join( '\n' ) )
	}
}

</script>