object HTMLInputElement
Hallo, ich versuche gerade mir Javascript beizubringen und konnte bisher jedes Problem erfolgreich googeln. Hier weiß ich aber nicht weiter: Ich lasse durch if-Bedingungen prüfen, ob bestimmte Variablen existieren und lasse sie darauf hin ausgeben. Nur bei der letzten Bedingung, also die, bei der alle Variablen existieren, kommt kein zusätzliches object HTMLInputElement
Der hier verwendete Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>dart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js_webseite/jquery.js"></script>
<style>
body { margin: 30px; background-color: #E5E5E5; }
button { border: 1px #000000 solid; border-radius: 5px; padding: 5px; background-color: #EEEEEE; cursor: pointer; }
header { width: 99%; padding: 10px; background-color: lightblue; border-radius: 5px; }
nav ul li { display: inline-block; }
nav input { border: none; border-radius: 5px; margin: 5px; padding: 5px; background-color: #EEEEEE; }
section { background-color: #FFFFFF; }
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dart Spielen!</title>
</head>
<body>
<header>Dart</header>
<nav>
<ul id="form">
<li><input id="name11" type="text" name="name1" placeholder="Spieler 1"></li>
<li><input id="name22" type="text" name="name2" placeholder="Spieler 2"></li>
<li><input id="name33" type="text" name="name3" placeholder="Spieler 3"></li>
<li><input id="name44" type="text" name="name4" placeholder="Spieler 4"></li>
<li><input id="name55" type="text" name="name5" placeholder="Spieler 5"></li>
<li><button onclick="names();">Okay!</button></li>
</ul>
<div id="anzeige"></div>
Modus:<p><button id="s5" onclick="mode501()">501</button> <button id="s3" onclick="mode301()">301</button></p>
<div id="modusanzeige"></div>
</nav>
<section>
<canvas id="dartscheibe" width="1800" height="700"></canvas>
</section>
</body>
</html>
<script>
$('#s3').hide();
$('#s5').hide();
/*function for names*/
var name1,name2,name3,name4,name5;
function names() {
name1 = document.querySelector("#name11").value;
name2 = document.querySelector("#name22").value;
name3 = document.querySelector("#name33").value;
name4 = document.querySelector("#name44").value;
name5 = document.querySelector("#name55").value;
if(name1 =="" && name2 =="" && name3 =="" && name4 =="" && name5 =="") {
document.getElementById('anzeige').innerHTML = "Es müssen mindestens 2 Felder ausgefüllt werden.";
}else if(name1 !="" && name2 =="") {
document.getElementById('anzeige').innerHTML = "Es müssen mindestens 2 Felder ausgefüllt werden.";
}else if(name1 !="" && name2 !="" && name3 =="" && name4 =="" && name5 =="") {
document.getElementById('anzeige').innerHTML = name1 + ", " + name2;
delete name3, name4, name5;
$('#s3').show();
$('#s5').show();
$('#form').hide();
}else if(name1 !="" && name2 !="" && name3 !="" && name4 =="" && name5 =="") {
document.getElementById('anzeige').innerHTML = name1 + ", " + name2 + ", " + name3;
// delete name4, name5;
$('#s3').show();
$('#s5').show();
$('#form').hide();
}else if(name1 !="" && name2 !="" && name3 !="" && name4 !="" && name5 =="") {
document.getElementById('anzeige').innerHTML = name1 + ", " + name2 + ", " + name3 + ", " + name4;
$('#s3').show();
$('#s5').show();
$('#form').hide();
}else if(name1 !="" && name2 !="" && name3 !="" && name4 !="" && name5 !="") {
document.getElementById('anzeige').innerHTML = name1 + ", " + name2 + ", " + name3 + ", " + name4 + ", " + name5;
$('#s3').show();
$('#s5').show();
$('#form').hide();
}
}
/*Das Spiel*/
function playgame(modeus) {
var c = document.getElementById('dartscheibe');
var ctx = c.getContext("2d")
ctx.font = "30px Arial";
if(name1 && name2 && !name3 && !name4 && !name5) {
ctx.fillText(name1, 10, 50);
ctx.fillText(modeus, 200, 50);
ctx.fillText(name2, 10, 100);
ctx.fillText(modeus, 200, 100);
}else if(name1 && name2 && name3 && !name4 && !name5) {
ctx.fillText(name1, 10, 50);
ctx.fillText(name2, 10, 100);
ctx.fillText(name3, 10, 150);
}else if(name1 && name2 && name3 && name4 && !name5) {
ctx.fillText(name1, 10, 50);
ctx.fillText(name2, 10, 100);
ctx.fillText(name3, 10, 150);
ctx.fillText(name4, 10, 200);
}else if(name1 && name2 && name3 && name4 && name5) {
ctx.fillText(name1, 10, 50);
ctx.fillText(modeus, 200, 50);
ctx.fillText(name2, 10, 100);
ctx.fillText(modeus, 200, 100);
ctx.fillText(name3, 10, 150);
ctx.fillText(modeus, 200, 150);
ctx.fillText(name4, 10, 200);
ctx.fillText(modeus, 200, 200);
ctx.fillText(name5, 10, 250);
ctx.fillText(modeus, 200, 250);
}
}
/*function for mode*/
function mode501() {
var play501 = "501";
$('#s3').hide();
$('#s5').hide();
document.getElementById('modusanzeige').innerHTML = "501";
playgame(501);
}
function mode301() {
var play301 = "301";
$('#s3').hide();
$('#s5').hide();
document.getElementById('modusanzeige').innerHTML = "301";
playgame(301);
}
</script>
</body>
</html>