Javascript getElementById（）中存在变量的问题_Javascript_Html_Css

Javascript getElementById（）中存在变量的问题

javascript html css

Javascript getElementById（）中存在变量的问题,javascript,html,css,Javascript,Html,Css,我最终要做的是：我试图制作一个按钮（把它想象成下一个按钮），它可以循环浏览9个图像，每个图像都有自己的id和链接问题是：每当我调用应该切换id的函数（例如从youtube到imgur）并将显示从none更改为block时，似乎什么都没有发生我尝试的内容：我首先尝试了一个switch语句，它看起来有点像这样（这是所有相关的javascript函数以及html）：注意：我目前只担心“下一步”按钮的功能 <body> <div id="backnext"> <

我最终要做的是：我试图制作一个按钮（把它想象成下一个按钮），它可以循环浏览9个图像，每个图像都有自己的id和链接

问题是：每当我调用应该切换id的函数（例如从youtube到imgur）并将显示从none更改为block时，似乎什么都没有发生

我尝试的内容：我首先尝试了一个switch语句，它看起来有点像这样（这是所有相关的javascript函数以及html）：

注意：我目前只担心“下一步”按钮的功能

<body>
<div id="backnext">
    <button class="button2" id="back"> < </button>
    <button class="button2" id="next" onclick="linkSwitch()"> > </button>
    <div id="tablecontainer">
        <ul id="tablelinks">
            <li> <!--Youtube Link-->
                <a id="youtube" href="https://www.youtube.com/"></a>
            </li>
            <li> <!--Imgur Link-->
                <a id="imgur" href="https://imgur.com/"></a>
            </li>
            <li> <!--Facebook Link-->
                <a id="facebook" href="https://www.facebook.com/"></a>
            </li>
            <li> <!--Google Link-->
                <a id="google" href="https://www.google.com/"> </a>
            </li>
            <li> <!--Ion Bank Link-->
                <a id="ionbank" href="https://ionbank.com/"></a>
            </li>
            <li> <!--Paypal Link-->
                <a id="paypal" href="https://www.paypal.com/home"></a>
            </li>
            <li> <!--Aol Link-->
                <a id="aol" href="https://mail.aol.com/webmail-std/en-us/suite"></a>
            </li>
            <li> <!--Amazon Link-->
                <a id="amazon" href="http://www.amazon.com/"></a>
            </li>
            <li> <!--Reddit Link-->
                <a id="reddit" href="https://www.reddit.com/"></a>
            </li>
        </ul>
    </div>      
</div>

<script>
var id, arraynum, x;
id = ["youtube", "imgur", "facebook", "google", "ionbank", "paypal", "aol", "amazon", "reddit"];

    var adder = (function () {
    var arraynum = 0;
    return function() {return arraynum += 1} })();

    function linkSwitch() {
        x = adder();
        x;
        switch (x) {
            case 0:
            document.getElementById("youtube").style.display = block;
            break;
            case 1:
            document.getElementById("imgur").style.display = block;
            break;
            case 2:
            document.getElementById("facebook").style.display = block;
            break;
            case 3:
            document.getElementById("google").style.display = block;
            break;
            case 4:
            document.getElementById("ionbank").style.display = block;
            break;
            case 5:
            document.getElementById("paypal").style.display = block;
            break;
            case 6:
            document.getElementById("aol").style.display = block;
            break;
            case 7:
            document.getElementById("amazon").style.display = block;
            break;
            case 8:
            document.getElementById("reddit").style.display = block;
            break;
        }
    }
</script>
</body>


< 
> 




















变量id，arraynum，x；
id=[“youtube”、“imgur”、“facebook”、“google”、“ionbank”、“paypal”、“aol”、“亚马逊”、“reddit”]；
变量加法器=（函数（）{
var arraynum=0；
返回函数（）{return arraynum+=1}}（）；
函数链接开关（）{
x=加法器（）；
x；
开关（x）{
案例0：
document.getElementById（“youtube”）.style.display=block；
打破
案例1：
document.getElementById（“imgur”）.style.display=block；
打破
案例2：
document.getElementById（“facebook”）.style.display=block；
打破
案例3：
document.getElementById（“google”）.style.display=block；
打破
案例4：
document.getElementById（“ionbank”）.style.display=block；
打破
案例5：
document.getElementById（“paypal”）.style.display=block；
打破
案例6：
document.getElementById（“aol”）.style.display=block；
打破
案例7：
document.getElementById（“amazon”）.style.display=block；
打破
案例8：
document.getElementById（“reddit”）.style.display=block；
打破
}
}

当点击按钮时，计数器计数应该增加1，每次计数器增加1，linkSwitch（）函数应该检查使用哪个id，因此如果计数器为4，它将显示ionbank图像和链接

当这不起作用时，我认为更改id会产生更干净/节省空间的代码，但它仍然不起作用：

<body>
<div id="backnext">
    <button class="button2" id="back"> < </button>
    <button class="button2" id="next" onclick="linkSwitch()"> > </button>
    <div id="tablecontainer">
        <ul id="tablelinks">
            <li> <!--Youtube Link-->
                <a id="youtube" href="https://www.youtube.com/"></a>
            </li>
            <li> <!--Imgur Link-->
                <a id="imgur" href="https://imgur.com/"></a>
            </li>
            <li> <!--Facebook Link-->
                <a id="facebook" href="https://www.facebook.com/"></a>
            </li>
            <li> <!--Google Link-->
                <a id="google" href="https://www.google.com/"> </a>
            </li>
            <li> <!--Ion Bank Link-->
                <a id="ionbank" href="https://ionbank.com/"></a>
            </li>
            <li> <!--Paypal Link-->
                <a id="paypal" href="https://www.paypal.com/home"></a>
            </li>
            <li> <!--Aol Link-->
                <a id="aol" href="https://mail.aol.com/webmail-std/en-us/suite"></a>
            </li>
            <li> <!--Amazon Link-->
                <a id="amazon" href="http://www.amazon.com/"></a>
            </li>
            <li> <!--Reddit Link-->
                <a id="reddit" href="https://www.reddit.com/"></a>
            </li>
        </ul>
    </div>      
</div>

<script>
var id, arraynum, x;
id = ["youtube", "imgur", "facebook", "google", "ionbank", "paypal", "aol", "amazon", "reddit"];

    var adder = (function () {
        var arraynum = 0;
        return function() {return arraynum += 1} })();

    function linkSwitch() {
        x = id[adder() % 9];
        return document.getElementById(x).style.display = block;
    }
</script>
</body>


< 
> 




















变量id，arraynum，x；
id=[“youtube”、“imgur”、“facebook”、“google”、“ionbank”、“paypal”、“aol”、“亚马逊”、“reddit”]；
变量加法器=（函数（）{
var arraynum=0；
返回函数（）{return arraynum+=1}}（）；
函数链接开关（）{
x=id[adder（）%9]；
return document.getElementById（x）.style.display=block；
}

如果您对这可能会出错的地方有任何建议，我们将不胜感激，以下是完整的代码（1个HTML和1个CSS文件）

return document.getElementById（x）.style.display=block

应该是

return document.getElementById（x）.style.display='block'（您忘了在引号中加“block”，所以它被解释为字符串文字，而不是变量）谢谢！！我不知道该如何给这个答案投票，但这确实奏效了！