Ich versuche, zwei Schaltflächen zu erstellen: eine, die der Webseite einen Kreis hinzufügt und eine, die einen Kreis löscht

Question

Ich versuche, zwei Schaltflächen zu erstellen: eine, die der Webseite einen Kreis hinzufügt, und eine, die einen Kreis löscht.

Es können nicht mehr als 5 Kreise auf der Bühne sein. Wenn die Schaltfläche "Hinzufügen" angeklickt wird und sich auf der Seite fünf Kreise befinden, wird eine Warnung angezeigt, die dem Benutzer mitteilt, dass keine weiteren Kreise hinzugefügt werden können.

var circle = document.getElementById('#div'); 
 

 
$(function() { 
 
    $('#buttonOne').on('click', addItem); 
 
    $('#buttonTwo').on('click', removeItem); 
 
}); 
 

 

 
function addItem(){ 
 

 
    if (circle > 5) { 
 
     alert('You cannot add more than 5 objects'); 
 
    } else { 
 
     document.body.appendChild(div); 
 
    }; 
 

 
} 
 

 
function removeItem(){ 
 

 
    if (circle== 0) { 
 
     alert('You have not added anything yet'); 
 
    } else { 
 
     $(this).remove(); 
 
    }; 
 
}​

.circle { 
 
    display: block; 
 

 
    width: 50px; 
 
    height: 50px; 
 

 
    border-radius: 50%; 
 

 
    transition: background-color 350ms; 
 
    
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="button" value="Add Circle" id="buttonOne"/> 
 
<input type="button" value="Delete Circle" id="buttonTwo"/> 
 
<div class="circle"></div> 
 
<p></p> 
 

 
<script src="week4.js" type="text/javascript"></script>

Answer 1

function addItem() { 
 
    var circle = $(".circle"); 
 
    if(circle.length >= 5) { 
 
     alert('You cannot add more than 5 objects'); 
 
    } else { 
 
     $('<div/>').addClass('circle').appendTo($('#body')); 
 
    }; 
 
} 
 

 
function removeItem() { 
 
    var circle = $(".circle"); 
 
    if(circle.length == 0) { 
 
     alert('You have not added anything yet'); 
 
    } else { 
 
     circle.eq(0).remove(); 
 
    }; 
 
} 
 

 
$('#buttonOne').click(addItem); 
 
$('#buttonTwo').click(removeItem);

.circle { 
 
    background-color: blue; 
 
    display: block; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    width: 50px; 
 
    transition: background-color 350ms; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<button id="buttonOne">b1</button> 
 
<button id="buttonTwo">b2</button> 
 

 
<div id="body"></div>

Answer 2

Es gibt ein paar Fehler im Code waren:

1. Wenn getElementById verwenden, sollten Sie nur die ID Namen geben, nicht das Zeichen .
2. this bezieht sich nicht auf einen Kreis in der removeItem-Funktion und wird daher nicht funktionieren.
3. Anhängen circle Variablen an den Körper würden doppelte IDs erstellen, was laut HTML-Spezifikation nicht erlaubt ist.
4. (kleiner Fehler) > 5 würde erlauben, dass 6 Kreise erstellt werden, also sollten Sie es zu >= 5 ändern.
5. (nur unnötiger Code) Bindung der Funktionen auf den Tasten muss nicht innerhalb $(function(){}); sein, es funktioniert gut ohne. Erspart dir ein bisschen Code. :)

Ich habe diese Fehler für Sie unten behoben. Da ich festgestellt habe, dass Sie bereits jQuery-Funktionen verwenden, habe ich mir auch erlaubt, jQuery in meinem Code zu nutzen. Es könnte natürlich ohne jQuery implementiert werden. :)

$('#addButton').on('click', addItem); 
 
$('#removeButton').on('click', removeItem); 
 

 
function addItem() { 
 
    var circles = $(".circle"); 
 
    if (circles.size() >= 5) { 
 
     alert('You cannot add more than 5 objects'); 
 
    } else { 
 
     $("body").append("<div class='circle'></div>"); 
 
    }; 
 
} 
 

 
function removeItem() { 
 
    var circles = $(".circle"); 
 
    if (circles.length == 0) { 
 
     alert('You have not added anything yet'); 
 
    } else { 
 
     circles.last().remove(); 
 
    } 
 
}

.circle { 
 
    background-color: blue; 
 
    display: block; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    width: 50px; 
 
    transition: background-color 350ms; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="addButton">Add a circle</button> 
 
<button type="button" id="removeButton">Remove a circle</button>

JSFiddle

Answer 3

Scheint, wie Sie ein paar Sachen in Ihrem js fehlen.

getElementbyId Funktion benötigt nur den Namen der ID als Argument. Überspringen Sie also das Nummernzeichen (#).

Auch. Sie vergleichen "Kreis" mit 0. Kreis ist eine ID. Wenn mehrere Elemente die gleiche ID verwenden sollen, sollten Sie stattdessen das Klassenattribut verwenden. Sie müssen also herausfinden, wie Sie eine Zahl aus dem variablen Kreis herausholen können, um sie mit einer anderen Zahl zu vergleichen.