Widget:Konjugationsklasse ermitteln

Probier es selbst aus! Gib hier die Lernformen eines Verbs ein und ermittle die Konjugationsklasse!

<p>
	<label for="input-inf">Infinitiv:</label><input type="text" placeholder="vocare" id="input-inf" oninput="parseData()"/>
	<label for="input-praes">1. Pers. Sing. Präsens:</label><input type="text" placeholder="voco" id="input-praes" oninput="parseData()"/>
	<label for="input-perf">1. Pers. Sing. Perfekt:</label><input type="text" placeholder="vocavi" id="input-perf" oninput="parseData()"/>
	<label for="input-ppp">PPP:</label><input type="text" placeholder="vocatum" id="input-ppp" oninput="parseData()"/>
</p>

<script>
function edge(id) {
	return document.querySelector('.edgePath[id*=' + id + '] path')
}

function node(id) {
	return document.querySelector('.node[id*=-' + id + '-] rect')
}

function parseData() {
	let inf = document.querySelector('#input-inf').value
	let praes = document.querySelector('#input-praes').value
	node('infe').style = null
	node('a').style = null
	node('e').style = null
	node('i').style = null
	node('ko').style = null
	node('ki').style = null
    let edgecolor = (inf == '' || praes ==  '') ? 'black' : 'lightgray'
	edge('L-inf-a').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-inf-i').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-inf-infe').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-infe-e').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-infe-ko').style = "stroke: " + edgecolor + "; fill: none;"
	edge('L-infe-ki').style = "stroke: " + edgecolor + "; fill: none;"
    if (inf == '' || praes ==  '') {
        return
    }
	if (inf.endsWith('are')) {
       	edge('L-inf-a').style = "stroke: red; fill: none;"
		node('a').style = "fill: red;"
    }
	if (inf.endsWith('ire')) {
       	edge('L-inf-i').style = "stroke: red; fill: none;"
		node('i').style = "fill: red;"
    }
	if (inf.endsWith('ere')) {
       	edge('L-inf-infe').style = "stroke: red; fill: none;"
		node('infe').style = "fill: red;"
        if (praes.endsWith('eo')) {
       	    edge('L-infe-e').style = "stroke: red; fill: none;"
		    node('e').style = "fill: red;"
        } else if (praes.endsWith('io')) {
       	    edge('L-infe-ki').style = "stroke: red; fill: none;"
		    node('ki').style = "fill: red;"
        } else {
       	    edge('L-infe-ko').style = "stroke: red; fill: none;"
		    node('ko').style = "fill: red;"
        }
    }
    
}
</script>