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
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>