猿问

为什么我在运行 changeword.js 时会得到 undefined 这个词？

所以，我试图为我的网站制作一种可以自动更改单词的方式，它几乎起作用了，但是我知道为什么我会得到“未定义”这个词；你能帮忙吗？

var words = ['affordable.', 'fast.', 'easy.', 'different.'],

    element = document.getElementById('wordChange'),

    currentWord = 0;


window.setInterval(function () {

    currentWord++;

    if (currentWord > words.length) currentWord = 0;

    element.innerHTML = words[currentWord];

}, 1000);

<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>ColorBundle | Welcome</title>

    <!--BOOTSTRAP-->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!--CSS-->

    <link rel="stylesheet" href="./style/style.css">

    <!--GOOGLE FONTS-->

    <link href="https://fonts.googleapis.com/css?family=Odibee+Sans|Raleway&display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap" rel="stylesheet">

    <!--

        font-family: 'Odibee Sans', cursive;

        font-family: 'Raleway', sans-serif;

        font-family: 'Shadows Into Light', cursive;

    -->

</head>


<body>

    <div class="nav">

        <div class="nav-brand">

            <h1>ColorBundle</h1>

        </div>

        <label for="toggle">&#9776;</label>

        <input type="checkbox" id="toggle">

        <div class="menu">

            <a href="#">HOME</a>

            <div class="menu-mobile-border"></div>

            <a href="#">ABOUT</a>

            <div class="menu-mobile-border"></div>

            <a href="#">WORKS</a>

            <div class="menu-mobile-border"></div>

            <a href="#">SERVICES</a>

            <div class="menu-mobile-border"></div>

            <a href="#">BLOG</a>

            <div class="menu-mobile-border"></div>

            <a href="#">CONTACT</a>

            <div class="menu-mobile-border"></div>

        </div>

    </div>


你能帮我解决这个问题吗？我知道这没什么大不了的，但我很好奇是什么来的


叮当猫咪
浏览 139回答 3
3回答

茅侃侃

您遍历数组，因此索引从 0 开始。而words.length为您提供索引 + 1所以你currentWord > words.length的越界了。做&nbsp;if (currentWord >= words.length)
0

慕桂英4014372

1）您的条件需要正确检查数组的长度（基于 0 索引），因此更改currentWord > words.length为currentWord >= words.length.2）您立即增加计数器，以便您看到的第一个单词位于索引 1，因此您可能希望将计数器增量移动到函数的底部。var words = ['affordable.', 'fast.', 'easy.', 'different.'],&nbsp; &nbsp; element = document.getElementById('wordChange'),&nbsp; &nbsp; currentWord = 0;window.setInterval(function () {&nbsp; &nbsp; if (currentWord >= words.length) currentWord = 0;&nbsp; &nbsp; element.innerHTML = `${currentWord}${words[currentWord]}`;&nbsp; &nbsp; ++currentWord;}, 1000);<div id="wordChange"/>
0

慕哥6287543

数组从index 0这样做开始currentWord&nbsp;>&nbsp;words.length你去index 4哪个不存在。你可以通过这样做来解决这个问题currentWord&nbsp;>=&nbsp;words.length反而。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答