使用jQuery的.html()等方法无法修改文本，求随机名言功能修复

嘿，我帮你排查了代码里的几个关键问题，这就是为什么你用.html()、innerHTML和.text()都没生效的原因，同时也帮你优化了整个功能的逻辑：

问题分析 #

1. 随机数生成逻辑错误：你原来的代码里生成名言索引时，用了quotes[i].length（这是单个名言的字符长度），而不是quotes.length（数组的元素个数），而且没做取整处理，导致得到的是小数，switch语句根本匹配不到对应的case，自然不会更新文本。
2. 多余的循环：你没必要遍历整个quotes和colors数组，每次点击只需要生成一个随机索引，直接从数组里取对应内容就行——循环会让代码重复执行多次，最后结果被覆盖，还浪费性能。
3. HTML结构不规范：你把页面内容<div class="head">放在了<head>标签里（head只能放元数据、样式等），还把script标签放在了html标签外面，浏览器解析时会出问题，影响脚本执行。

修正后的完整代码 #

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Kavivanar|Supermercado+One" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
  <style>
    /* 基础样式优化，提升页面体验 */
    body {
      transition: background-color 0.4s ease;
      font-family: 'Oswald', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      padding: 20px;
    }
    .boxed {
      background: white;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      max-width: 600px;
      text-align: center;
    }
    #quote {
      font-size: 1.5em;
      margin-bottom: 20px;
      font-family: 'Kavivanar', cursive;
    }
    .btns {
      display: flex;
      gap: 15px;
      justify-content: center;
      align-items: center;
    }
    .btn-1 {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      color: white;
      cursor: pointer;
      font-size: 1em;
      transition: background-color 0.4s ease;
    }
    .fa {
      cursor: pointer;
    }
    .footer {
      margin-top: auto;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="head">
    <h2>Random Quote Machine</h2>
  </div>
  <div class="boxed">
    <p id="quote">"Press New Quote Button for a random quote"</p>
    <div class="btns">
      <i class="fa fa-tumblr-square" style="font-size:36px;color:#0A4289"></i>
      <i class="fa fa-twitter-square" style="font-size:36px;color:#07F5E7"></i>
      <button type="button" class="btn-1" id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Fetching">New Quote</button>
    </div>
  </div>
  <div class="footer">
    <p>
      <a class="link" href="https://codepen.io/natekicksa/">By:Nate</a>
    </p>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    var main = function() {
      var colors = ["#ED2007", "#EDAB07", "#ECF30A", "#69F30A", "#0AF3E8", "#0A69F3", "#DE0AF3", "#F30ADE"];
      var quotes = [
        "If you have nothing, are you a nillionaire?",
        "Turning up the volume is like zooming in, but with sound.",
        "If I eat myself, will I get twice as big, or disappear completely?",
        "Out of my mind. Back in five minutes",
        "I’m not a complete idiot — Some parts are missing."
      ];

      // 点击New Quote按钮的核心逻辑
      $(".btn-1").click(function(){
        var $this = $(this);
        $this.button('loading');
        
        setTimeout(function() {
          // 生成0到名言数组长度-1的随机整数索引
          var randQuoteIndex = Math.floor(Math.random() * quotes.length);
          // 直接用数组索引更新文本，简洁高效
          $('#quote').text(quotes[randQuoteIndex]);

          // 生成颜色数组的随机索引
          var randColorIndex = Math.floor(Math.random() * colors.length);
          var selectedColor = colors[randColorIndex];
          // 更新页面背景和按钮颜色
          document.body.style.backgroundColor = selectedColor;
          $this.css('background-color', selectedColor);

          $this.button('reset');
        }, 1000); // 缩短延迟时间，提升交互体验，可自行调整
      });

      // Tumblr按钮跳转逻辑
      $(".fa-tumblr-square").click(function(){
        location.href = "https://www.tumblr.com/";
      });

      // Twitter按钮跳转，自动携带当前名言
      $(".fa-twitter-square").click(function(){
        var currentQuote = $('#quote').text();
        location.href = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(currentQuote);
      });
    };

    $(document).ready(main);
  </script>
</body>
</html>

关键修改点说明 #

• 修复随机数生成：用Math.floor(Math.random() * array.length)生成正确的数组索引，确保得到整数，直接从数组取值，去掉了冗余的switch语句。
• 移除多余循环：每次点击只生成一次随机索引，逻辑更清晰，性能更优。
• 规范HTML结构：把页面内容移到<body>内，script标签放在body末尾，确保DOM加载完成后再执行脚本。
• 优化交互体验：给背景色和按钮颜色添加过渡动画，缩短加载延迟；Twitter按钮自动携带当前名言，功能更完整。
• 简化文本更新：直接通过数组索引更新文本，不用重复写每个名言，后续维护更方便。

内容的提问来源于stack exchange，提问作者nathan Heath