如何使我的旋轉功能起作用？

Question

所以我想做的是創建兩個函數，每個函數都帶有各自的按鈕。 該功能的目的是使包含圖像的div通過數字圖像旋轉。 當向右旋轉3時，它會在頁面上留下可見的圖像堆棧；向左旋轉1時，也會發生相同的情況。 向右旋轉1時，新圖像彈出到可見堆棧中。 我已經寫了基本的JavaScript，但是當我單擊按鈕時什么也沒發生。 誰能幫我這個忙嗎？ 謝謝！！

#img1 {
        position: absolute;
        background-color: lightblue;
        height: 70px;
        width: 50px;
        z-index: 5;
        margin: auto;
        right: 45px;
    }

    #img2 {
        position: absolute;
        background-color: lightcoral;
        height: 70px;
        width: 50px;
        z-index: 10;
        left: 70px;
        right: 70px;
        top: 100px;
        margin: auto;
    }

    #img3 {
        position: absolute;
        background-color: lightgreen;
        height: 70px;
        width: 50px;
        z-index: 5;
        margin: auto;
        left: 45px;
    }

#rightArrow {
        position: absolute;
        left: 15px;
        bottom: 45px;
        width: auto;
        font-size: 24px;
        transform: rotate(180deg);

    }

    #rightArrow:hover {
        color: yellow;
    }

    #leftArrow {
        position: absolute;
        right: 15px;
        bottom: 45px;
        width: auto;
        font-size: 24px;
        transform: rotate(180deg);

    }

    #leftArrow:hover {
        color: yellow;
    }

<div>
<p id='leftArrow'>&cularr;</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>&curarr;</p>

var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");

myLeftArrow.addEventListener("click", rotateLeft(), false);

    function rotateLeft()
    {
        var set1 = document.getElementById('img1');
        var set2 = document.getElementById('img2');
        var set3 = document.getElementById('img3');
        set1.id = ('img3');
        set2.id = ('img1');
        set3.id = ('img2');
    }

    myRightArrow.addEventListener("click", rotateRight(), false);

    function rotateRight()
    {
        var set1 = document.getElementById('img1');
        var set2 = document.getElementById('img2');
        var set3 = document.getElementById('img3');
        set1.id = ('img2');
        set2.id = ('img3');
        set3.id = ('img1');
    }

Answer 1

問題出在你的聽眾身上。 您應該在沒有括號的情況下傳遞rotateLeft()和rotateRight() 。 請參閱下面的工作代碼。

 var myLeftArrow = document.querySelector("#rightArrow"); var myRightArrow = document.querySelector("#leftArrow"); myLeftArrow.addEventListener("click", rotateLeft, false); function rotateLeft() { var set1 = document.getElementById('img1'); var set2 = document.getElementById('img2'); var set3 = document.getElementById('img3'); set1.id = ('img3'); set2.id = ('img1'); set3.id = ('img2'); } myRightArrow.addEventListener("click", rotateRight, false); function rotateRight() { var set1 = document.getElementById('img1'); var set2 = document.getElementById('img2'); var set3 = document.getElementById('img3'); set1.id = ('img2'); set2.id = ('img3'); set3.id = ('img1'); } 

 #img1 { position: absolute; background-color: lightblue; height: 70px; width: 50px; z-index: 5; margin: auto; right: 45px; } #img2 { position: absolute; background-color: lightcoral; height: 70px; width: 50px; z-index: 10; left: 70px; right: 70px; top: 100px; margin: auto; } #img3 { position: absolute; background-color: lightgreen; height: 70px; width: 50px; z-index: 5; margin: auto; left: 45px; } #rightArrow { position: absolute; left: 15px; bottom: 45px; width: auto; font-size: 24px; transform: rotate(180deg); } #rightArrow:hover { color: yellow; } #leftArrow { position: absolute; right: 15px; bottom: 45px; width: auto; font-size: 24px; transform: rotate(180deg); } #leftArrow:hover { color: yellow; } 

 <p id='leftArrow'>&cularr;</p> <div id='img1' style="border: 2px solid blue;">1</div> <div id='img2' style="border: 2px solid red;">2</div> <div id='img3' style="border: 2px solid green;">3</div> <p id='rightArrow'>&curarr;</p>