Widget:Deklinationsklasse ermitteln

Probier es selbst aus! Gib hier den Nominativ und Genitiv eines Substantivs ein und ermittle die Deklinationsklasse!

<p>
	<label for="input-nom">Nominativ:</label><input type="text" id="input-nom" oninput="renderForms()"/>
	<label for="input-gen">Genitiv:</label><input type="text" id="input-gen" oninput="renderForms()"/>
	<label for="input-genus">Genus:</label><select id="input-genus" onchange="renderForms()">
		<option value="m">maskulinum</option>
		<option value="f">femininum</option>
		<option value="n">neutrum</option>
	</select>
</p>
<script>
const DEKLS = {
	o: {
		m: {
			S: ['', 'i', 'o', 'um', 'o', 'e'],
			P: ['i', 'orum', 'is', 'os', 'is']
		},
		f: {
			S: ['', 'i', 'o', 'um', 'o'],
			P: ['i', 'orum', 'is', 'os', 'is']
		},
		n: {
			S: ['', 'i', 'o', 'um', 'o'],
			P: ['a', 'orum', 'is', 'a', 'is']
		}
	},
	a: {
		m: {
			S: ['', 'ae', 'ae', 'am', 'ā'],
			P: ['ae', 'arum', 'is', 'as', 'is']
		},
		f: {
			S: ['', 'ae', 'ae', 'am', 'ā'],
			P: ['ae', 'arum', 'is', 'as', 'is']
		},
		n: {
			S: ['', 'ae', 'ae', 'am', 'ā'],
			P: ['ae', 'arum', 'is', 'as', 'is']
		}
	},
	k: {
		m: {
			S: ['', 'is', 'i', 'em', 'e'],
			P: ['es', 'um', 'ibus', 'es', 'ibus']
		},
		f: {
			S: ['', 'is', 'i', 'em', 'e'],
			P: ['es', 'um', 'ibus', 'es', 'ibus']
		},
		n: {
			S: ['', 'is', 'i', 'em', 'e'],
			P: ['a', 'um', 'ibus', 'a', 'ibus']
		}
	},
	e: {
		m: {
			S: ['', 'ei', 'ei', 'em', 'e'],
			P: ['es', 'erum', 'ebus', 'es', 'ebus']
		},
		f: {
			S: ['', 'ei', 'ei', 'em', 'e'],
			P: ['es', 'erum', 'ebus', 'es', 'ebus']
		},
		n: {
			S: ['', 'ei', 'ei', 'em', 'e'],
			P: ['es', 'erum', 'ebus', 'es', 'ebus']
		}
	},
	i: {
		m: {
			S: ['', 'is', 'i', 'em', 'i'],
			P: ['es', 'ium', 'ibus', 'es', 'ibus']
		},
		f: {
			S: ['', 'is', 'i', 'em', 'i'],
			P: ['es', 'ium', 'ibus', 'es', 'ibus']
		},
		n: {
			S: ['', 'is', 'i', 'em', 'i'],
			P: ['ia', 'ium', 'ibus', 'ia', 'ibus']
		}
	},
	u: {
		m: {
			S: ['', 'ūs', 'ui', 'um', 'u'],
			P: ['ūs', 'uum', 'ibus', 'ūs', 'ibus']
		},
		f: {
			S: ['', 'ūs', 'ui', 'um', 'u'],
			P: ['ūs', 'uum', 'ibus', 'ūs', 'ibus']
		},
		n: {
			S: ['', 'ūs', 'ui', 'u', 'u'],
			P: ['ūa', 'uum', 'ibus', 'ūa', 'ibus']
		}
	}
}

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

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

function detectDecl() {

	let nom = document.querySelector('#input-nom').value
	let gen = document.querySelector('#input-gen').value
	node('genis').style = null
	node('geni').style = null
	node('a').style = null
	node('e').style = null
	node('i').style = null
	node('o').style = null
	node('u').style = null
	node('k').style = null
	if (nom == '' || gen ==  '') {
		edge('L-gen-genis').style = "stroke: black; fill: none;"
		edge('L-genis-i').style = "stroke: black; fill: none;"
		edge('L-genis-k').style = "stroke: black; fill: none;"
		edge('L-gen-geni').style = "stroke: black; fill: none;"
		edge('L-geni-e').style = "stroke: black; fill: none;"
		edge('L-geni-o').style = "stroke: black; fill: none;"
		edge('L-gen-a').style = "stroke: black; fill: none;"
		edge('L-gen-u').style = "stroke: black; fill: none;"
		edge('L-gen-i').style = "stroke: black; fill: none;"
		edge('L-gen-o').style = "stroke: black; fill: none;"
		edge('L-gen-k').style = "stroke: black; fill: none;"
		return
	} else {
		edge('L-gen-genis').style = "stroke: lightgray; fill: none;"
		edge('L-genis-i').style = "stroke: lightgray; fill: none;"
		edge('L-genis-k').style = "stroke: lightgray; fill: none;"
		edge('L-gen-geni').style = "stroke: lightgray; fill: none;"
		edge('L-geni-e').style = "stroke: lightgray; fill: none;"
		edge('L-geni-o').style = "stroke: lightgray; fill: none;"
		edge('L-gen-a').style = "stroke: lightgray; fill: none;"
		edge('L-gen-u').style = "stroke: lightgray; fill: none;"
		edge('L-gen-i').style = "stroke: lightgray; fill: none;"
		edge('L-gen-o').style = "stroke: lightgray; fill: none;"
		edge('L-gen-k').style = "stroke: lightgray; fill: none;"
	}
	if (gen.endsWith('is')) {
		edge('L-gen-genis').style = "stroke: red; fill: none;"
		node('genis').style = "fill: red;"
		if (nom == gen || nom.endsWith('ar') || nom.endsWith('e') || nom.endsWith('al')) {
			node('i').style = "fill: red;"
			edge('L-genis-i').style = "stroke: red; fill: none;"
		} else {
			node('k').style = "fill: red;"
			edge('L-genis-k').style = "stroke: red; fill: none;"
		}
		return
	}
	if (gen.endsWith('i')) {
		node('geni').style = "fill: red;"
		edge('L-gen-geni').style = "stroke: red; fill: none;"
		if (nom.endsWith('es')) {
			node('e').style = "fill: red;"
			edge('L-geni-e').style = "stroke: red; fill: none;"
			return 'e'
		} else {
			node('o').style = "fill: red;"
			edge('L-geni-o').style = "stroke: red; fill: none;"
			return 'o'
		}
	}
	if (gen.endsWith('ae') || gen.endsWith('arum')) {
		node('a').style = "fill: red;"
		edge('L-gen-a').style = "stroke: red; fill: none;"
		return 'a'
	}
	if (gen.endsWith('us') || gen.endsWith('ūs') || gen.endsWith('uum')) {
		node('u').style = "fill: red;"
		edge('L-gen-u').style = "stroke: red; fill: none;"
		return 'u'
	}
	if (gen.endsWith('ium')) {
		node('i').style = "fill: red;"
		edge('L-gen-i').style = "stroke: red; fill: none;"
		return 'i'
	}
	if (gen.endsWith('orum')) {
		node('o').style = "fill: red;"
		edge('L-gen-o').style = "stroke: red; fill: none;"
		return 'o'
	}
	if (gen.endsWith('um')) {
		node('k').style = "fill: red;"
		edge('L-gen-k').style = "stroke: red; fill: none;"
		return 'k'
	}
}

function renderForms() {
	let decl = detectDecl()
	let genus = document.querySelector('#input-genus').value
	console.log(genus)
}
</script>