亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何獲取數組上的第二個索引

如何獲取數組上的第二個索引

料青山看我應如是 2023-07-20 14:48:22
我正在嘗試迭代圖像數組,單獨顯示每個圖像并使用按鈕移至下一個圖像。但是,當單擊按鈕時,它會移動到下一個圖像,但在第二個圖像之后,它不會移動到第三個圖像,等等任何人都可以找到循環卡住的地方嗎?function changeImage() {  var imageArray = ["/Users/rate/images/images/practice/sun1.jpg", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"]  var currentImage = 0;  currentImage += 1;  if (currentImage >= imageArray.length) {    currentImage = 0;  }  document.getElementById("mainImage").src = imageArray[currentImage]}<!DOCTYPE html><html><head>  <title> App Icons? </title>  <link rel="stylesheet" type="text/css" href="/Users/Website/css/mainstyle.css">  <script type="text/javascript" src="/Users/rate/js/main.js"></script></head><body class="body">  <div>    <div>      <hr>      <div class=topbar>        <h1> Do you find this App Icon aesthically pleasing</h1>      </div>      <hr>      <div id=displayedImage> </div>      <img src="/Users/rate/images/images/practice/sun1.jpg" id="mainImage" />      <div id=answer>        <label> Strongly Agree </label>        <label><input type="radio" name="answer" value="1" required><span>1</span></label>        <label><input type="radio" name="answer" value="2" required><span>2</span></label>        <label><input type="radio" name="answer" value="3" required><span>3</span></label>        <label><input type="radio" name="answer" value="4" required><span>4</span></label>        <label><input type="radio" name="answer" value="5" required><span>5</span></label>        <label> Strongly disagree</label>        <hr>      </div>      <input type="button" onclick="changeImage()" value="I am complete">
查看完整描述

1 回答

?
眼眸繁星

TA貢獻1873條經驗 獲得超9個贊

首先,范圍。您currentImage應該全局聲明,否則它將始終從 0 開始。其次,數組中最后一個元素的索引等于數組長度減 1,因此您需要currentImage檢查imageArray.length - 1:


var currentImage = 0;


function changeImage() {


  var imageArray = ["/Users/rate/images/images/practice/sun1.jpg", "/Users/rate/images/images/practice/sun2.jpg", "/Users/rate/images/images/practice/sun3.jpg", "/Users/rate/images/images/practice/sun4.jpg"]


  if (currentImage >= imageArray.length - 1) {

    currentImage = 0;

  } else {

    currentImage += 1;

  }

  document.getElementById("mainImage").src = imageArray[currentImage]

  console.log(currentImage);


}

<div>

  <div>

    <hr>

    <div class=topbar>

      <h1> Do you find this App Icon aesthically pleasing</h1>

    </div>

    <hr>


    <div id=displayedImage> </div>

    <img src="/Users/rate/images/images/practice/sun1.jpg" id="mainImage" />


    <div id=answer>

      <label> Strongly Agree </label>

      <label><input type="radio" name="answer" value="1" required><span>1</span></label>

      <label><input type="radio" name="answer" value="2" required><span>2</span></label>

      <label><input type="radio" name="answer" value="3" required><span>3</span></label>

      <label><input type="radio" name="answer" value="4" required><span>4</span></label>

      <label><input type="radio" name="answer" value="5" required><span>5</span></label>

      <label> Strongly disagree</label>

      <hr>



    </div>


    <input type="button" onclick="changeImage()" value="I am complete">


查看完整回答
反對 回復 2023-07-20
  • 1 回答
  • 0 關注
  • 128 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號