Ändern des Bilderrahmens mit Toggle-Taste

Ok, wir haben eine einfache Benutzerinfo Bearbeitungsseite.Ich möchte eine Umschaltfläche erstellen, die Profilbild Rand-Radius von 0 bis 25 und rückwärts vertauscht.Aber der 2. Teil funktioniert nicht.Ich erstellt if zu überprüfen, ob die boarder Im Umkreis von 25 bereits ist, so dass es es 0 machen, aber es funktioniert nicht work.Here ist mein CodeÄndern des Bilderrahmens mit Toggle-Taste

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body onload="buildImage();"> 
<div class="contents" id="content"></div> 
<button onclick="changeImage()">NextImage</button> 
<button onclick="changeShape()">ChangeShape</button> 
<button onclick="uploadImage()">Upload Image</button> 
</body> 

<script> 
var images = [ 'profile1.png', 'profile2.png','profile3.png']; 
var index = 0; 
var array_length = 3; 
function buildImage() { 
    var img = document.createElement('img') 
    img.src = images[index]; 
    document.getElementById('content').appendChild(img); 
} 

    function changeImage(){ 
    var img =  document.getElementById('content').getElementsByTagName('img')[0] 
    index++; 
    index = index % array_length; 
    img.src = images[index]; 
} 
function changeShape(){ 
    var shape = document.getElementById('content').getElementsByTagName('img')[0].style.borderRadius = "25px"; 
    if(shape.style.borderRadius == 25){ 
    var shape2 = document.getElementById('content').getElementsByTagName('img')[0].style.borderRadius = "0px"; 
    } 

} 
function uploadImage() { 
images.push("profile4.png"); 
array_length++; 

} 
</script> 
</html>

Irgendwelche Ideen, warum es nicht funktioniert?

Quelle

2016-05-19 Aggelos Sfakianos

25 Wechsel zu „25px“ oder „25“ hat nicht funktioniert entweder –

Sie ordnen nutzlos Variablen in Ihrer Funktion nach Aussehen.

Es ist nicht notwendig, shape2 zu deklarieren. Erklären Sie die Form einfach einmal und überprüfen Sie sie dann. Stellen Sie außerdem sicher, dass Sie shape.style.borderRadius auf eine Zeichenfolge wie "25px" überprüfen, da diese zurückgegeben wird.

so etwas wie dieses Versuchen:

function changeShape(){ 
    var shape = document.getElementById('content').getElementsByTagName('img')[0]; 
    if(shape.style.borderRadius == "25px"){ 
    shape.style.borderRadius = "0px"; 
    }else{ 
    shape.style.borderRadius = "25px"; 
    } 
}

Quelle

2016-05-19 19:27:17 Maantje

und ein extra question.Can Sie mir einen Tipp geben, wie bei hinzuzufügen boarder das gleiche Bild und auch ti ändern Frame immer wenn die ChangeShape-Funktion aufgerufen wird? –

@AggelosSfakianos Sie wollen eine Grenze, die immer zeigt und ist die gleiche? Wenn das der Fall ist, fügen Sie einfach etwas CSS hinzu 'img { border: 5px solid #ccc; } ' – Maantje

Ja und nein. Ich möchte einen Rahmen hinzufügen, aber ich möchte, dass die Grenze zusammen mit dem Bild Form ändern, wenn die Funktion –

Ändern des Bilderrahmens mit Toggle-Taste

Antwort

Verwandte Themen