为什么JavaScript强制整数变量成为字符串变量?

时间:2014-10-05 10:20:42

标签: javascript

我正在为学校做一个项目,这是一个有许多随机小项目的网站。 在其中一个项目中,我嵌入了一个带有src链接“... blah ... / Ndub1”的视频,如果你将链接中的“1”更改为“2”,那么你就得到了下一个视频。现在我正在尝试编写一个javaScript脚本,在单击按钮时将该数字更改为“number + 1”或“number - 1”。这是我网站的源代码:

<html>
    <head>
        <!-- some stuff -->
        <script>        
            var e = "1"; 
            var s = "0";
            function narutoGetEpisodeGen() {
                var a, link, link2;
                e = document.getElementById('episodeInput').value
                if (document.getElementById('naruto').checked) {
                    a = "Ndub" + document.getElementById('episodeInput').value;
                    s = 0;
                }
                else {
                    a = "Nshipdub" + document.getElementById('episodeInput').value;
                    s = 1;
                }
                link = '<embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp;plugins=timeslidertooltipplugin-2" height="480" width="720">';
                link2 = '<video width="720" height="480" controls><source id="videoEmbeddedVid" src="http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp&autoplay=0" type="video/webm">Your browser does not support the video tag.</video>';
                document.getElementById('embeddedVideoDiv').innerHTML = link;
                document.getElementById('videoVidDiv').innerHTML = link2;
                document.getElementById('episodeInput').value = "";
            }

            function oneForward() {
                var a, z, link;
                if (s == 0) {
                    z = eval(parseInt(e)+1);
                    a = "Ndub"+z.toString();
                    e += 1;
                }
                else {
                    z = eval(parseInt(e)+1);
                    a = "Nshipdub"+z.toString();
                    e += 1;
                }           
                link = '<embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp;plugins=timeslidertooltipplugin-2" height="480" width="720">';
                link2 = '<video width="720" height="480" controls><source id="videoEmbeddedVid" src="http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp&autoplay=0" type="video/webm">Your browser does not support the video tag.</video>';
                document.getElementById('embeddedVideoDiv').innerHTML = link;
                document.getElementById('videoVidDiv').innerHTML = link2;
            }

            function oneBack() {
                var a, x, link;
                if (s == 0) {
                    x = eval(parseInt(e)-1);
                    a = "Ndub"+x.toString();
                    e -= 1;
                }
                else {
                    x = eval(parseInt(e)-1);
                    a = "Nshipdub"+x.toString();
                    e -= 1;
                }
                link = '<embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp;plugins=timeslidertooltipplugin-2" height="480" width="720">';
                link2 = '<video width="720" height="480" controls><source id="videoEmbeddedVid" src="http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp&autoplay=0" type="video/webm">Your browser does not support the video tag.</video>';
                document.getElementById('embeddedVideoDiv').innerHTML = link;
                document.getElementById('videoVidDiv').innerHTML = link2;
            }
        </script>
        <!-- some stuff -->
    </head>
    <body>
        <!-- some stuff -->
        <p>Number of episode: <input type="text" id="episodeInput"/></p>
        <p><label><input type="radio" name="narutoSeason" id="naruto"> Naruto</label></p>
        <p><label><input type="radio" name="narutoSeason" id="narutoShippuden"> Naruto Shippuden</label></p>
        <p><button type="button" id="submitButton" onclick="narutoGetEpisodeGen()">Submit</button></p>
        <div id="embeddedVideoDiv">
            <embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/Ndub1&amp;plugins=timeslidertooltipplugin-2" height="480px" width="720px">
        </div>
        <p><button type="button" onClick="oneBack()">Previous</button>  <button type="button" onClick="oneForward()">Next</button></p>
        <!-- some stuff -->     
    </body>
</html>

所以主要的问题是我从数字中添加或减去1的部分。我第一次使用oneForward按钮时它工作正常,但是下次我使用那个按钮时,它只会在我开始的剧集数量上加“1”。然后,如果我使用相同的按钮,错误会一直重复,但如果我使用另一个按钮,则会停止发生,并且从那时起它就能正常工作。 为了让我的自我更清楚,我会输入一些我正在做的事情的例子。

- Type in the input(id="episodeInput"): 3 > click on input(id="narutoShippuden") > click the button(id="submitButton") > observe how the function("narutoGetEpisode") did its job perfectly > click the button(onClick="oneForward") > observe the function working just fine (transformed the number from "3" to "4") > click the button(onClick="oneForward") again > observer how the link in embedded part transformed the number into "31" > click the button(onClick="oneForward") again > observer how the link in embedded part transformed the number into "311" > click the button(onClick="oneForward") again > observer how the link in embedded part transformed the number into "3111" > click the button(onClick="oneForward") again > observer how the link in embedded part transformed the number into "31111"  > click the button(onClick="oneBack") > observe the function working just fine (transformed the number from "31111" to "31110") > from here on, both buttons act just fine
- Type in the input(id="episodeInput"): 3 > click on input(id="narutoShippuden") > click the button(id="submitButton") > observe how the function("narutoGetEpisode") did its job perfectly > click the button(onClick="oneForward") > observe the function working just fine (transformed the number from "3" to "4") > click the button(onClick="oneBack") > observer how the link in embedded part transformed the number into "30" > click the button(onClick="oneForward") again > observe how the button did its job okay (transforms the number from "30" to "31") > click the button(onClick="oneForward") again > observe how the button did its job okay (transforms the number from "31" to "32") > click the button(onClick="oneBack") again > observe how the button did its job okay (transforms the number from "32" to "31") > from here on, both buttons act just fine
- Type in the input(id="episodeInput"): 3 > click on input(id="narutoShippuden") > click the button(id="submitButton") > observe how the function("narutoGetEpisode") did its job perfectly > click the button(onClick="oneBack") > observe the function working just fine (transformed the number from "3" to "2") > click the button(onClick="oneBack") > observe the function working just fine (transformed the number from "2" to "1") > from here on, both buttons act just fine

我还应该提到,这种情况发生在Mozilla,Chrome和IE(所有这些都是最新的)中。

因此,当我通过头脑风暴来解决这个问题并搜索论坛时,我尝试了很多变种来修复代码,所以现在我要输入我测试过的东西并且工作得很简单或更糟:

要明确我只是在标题中的“script”标签中添加了代码,更准确地说,只是在这些行中:

function oneForward() {
                var a, z, link;
                if (s == 0) {
                    z = eval(parseInt(e)+1);
                    a = "Ndub"+z.toString();
                    e += 1;
                }
                else {
                    z = eval(parseInt(e)+1);
                    a = "Nshipdub"+z.toString();
                    e += 1;
                }           
                link = '<embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp;plugins=timeslidertooltipplugin-2" height="480" width="720">';
                link2 = '<video width="720" height="480" controls><source id="videoEmbeddedVid" src="http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp&autoplay=0" type="video/webm">Your browser does not support the video tag.</video>';
                document.getElementById('embeddedVideoDiv').innerHTML = link;
                document.getElementById('videoVidDiv').innerHTML = link2;
            }

            function oneBack() {
                var a, x, link;
                if (s == 0) {
                    x = eval(parseInt(e)-1);
                    a = "Ndub"+x.toString();
                    e -= 1;
                }
                else {
                    x = eval(parseInt(e)-1);
                    a = "Nshipdub"+x.toString();
                    e -= 1;
                }
                link = '<embed type="application/x-shockwave-flash" src="http://cdn.directvid.com/jwplayer/player.swf" style="undefined" name="embeddedVid" quality="high" allowfullscreen="true" allowscriptaccess="always" wmode="opaque" flashvars="autostart=&amp;stretching=exactfit&amp;type=video&amp;skin=http://cdn.directvid.com/jwplayer/nemesis1.zip&amp;file=http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp;plugins=timeslidertooltipplugin-2" height="480" width="720">';
                link2 = '<video width="720" height="480" controls><source id="videoEmbeddedVid" src="http://www.animefun.com/dl/googDev.php?url=/112965806382805543465/' + a + '&amp&autoplay=0" type="video/webm">Your browser does not support the video tag.</video>';
                document.getElementById('embeddedVideoDiv').innerHTML = link;
                document.getElementById('videoVidDiv').innerHTML = link2;

所以我改变了

z = eval(parseInt(e)+1);
a = "Nshipdub"+z.toString();

z = (parseInt(e)+1);
a = "Nshipdub"+z.toString();

z = (e+1);
a = "Nshipdub"+z.toString();

a = "Nshipdub"+(e+1);

a = "Nshipdub"+(e*1+1);

a = "Nshipdub"+(parseInt(e)+1);

a = "Nshipdub"+(parseInt(e)*1+1);

a = "Nshipdub"+(parseInt(e)+1).toString();

和其他一些我甚至都不记得的了。无论如何,他们都没有更好。

我真的很感激这方面的一些帮助,也解释了为什么上面的例子不会起作用,特别是那些带有另一个变量的例子,因为我在论坛上看到的例子说&gt;“string”+ 3 + 1“&lt ;等于&gt;“string +”3“+”1“&lt;并且&gt; 1 + 5 +“字符串”&lt;等于&gt; 6 +“string”&lt;。

1 个答案:

答案 0 :(得分:2)

&#34;为什么JavaScript会将整数变量强制转换为字符串变量?&#34;

因为,呃......

var e = "1";

您将其定义为字符串?

e = document.getElementById('episodeInput').value

两次?

尝试:

var e = 1;

e = parseInt(document.getElementById('episodeInput').value,10);