2201_75330918 2024-03-09 14:12 采纳率: 40%
浏览 2
已结题

js请问下面的代码数组怎么改啊

下面这段代码怎么改才能设置数组中元素的颜色啊啊


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>占い</h1>
  <span>名前：</span>
  <input type="text" id="name">
  <button id="uranau">占う</button>
  <p id="result"></p>

  <script>
    'use strict';
    const arr = ['大吉', '中吉', '小吉', '末吉', '凶']
    const uranau = document.querySelector('#uranau')
    const name = document.querySelector('#name')
    const result = document.querySelector('#result')
    uranau.addEventListener('click', function () {
      const random = Math.floor(Math.random() * 5)


      switch (random.value) {
        case 0:
          arr[0].style.color = 'pink'
          break
        case 1:
          arr[1].style.color = 'blue'
          break
        case 2:
          arr[2].style.color = 'orange'
          break
        case 3:
          arr[3].style.color = 'green'
          break
        case 4:
          arr[4].style.color = 'red'
          break
      }
      result.innerHTML = name.value + 'さんの運勢:' + arr[random]

    })


  </script>
</body>

</html>
  • 写回答

3条回答 默认 最新

  • 檀越@新空间 2024-03-09 14:12
    关注

    2201_75330918 下午好🌅🌅🌅
    本答案参考ChatGPT-3.5

    在你提供的代码中，尝试给数组元素（字符串）设置颜色是不正确的，因为字符串没有 style 属性。你需要改变的是 result 元素的样式来显示随机选择的颜色。以下是修改后的代码：

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pink { color: pink; }
    .blue { color: blue; }
    .orange { color: orange; }
    .green { color: green; }
    .red { color: red; }
  </style>
</head>

<body>
  <h1>占い</h1>
  <span>名前：</span>
  <input type="text" id="name">
  <button id="uranau">占う</button>
  <p id="result"></p>

  <script>
    'use strict';
    const arr = ['大吉', '中吉', '小吉', '末吉', '凶'];
    const uranau = document.querySelector('#uranau');
    const name = document.querySelector('#name');
    const result = document.querySelector('#result');

    uranau.addEventListener('click', function () {
      const random = Math.floor(Math.random() * 5);
      let className;
      switch (random) {
        case 0:
          className = 'pink';
          break;
        case 1:
          className = 'blue';
          break;
        case 2:
          className = 'orange';
          break;
        case 3:
          className = 'green';
          break;
        case 4:
          className = 'red';
          break;
      }
      
      // 设置结果文本并添加相应的类名以更改颜色
      result.innerHTML = `${name.value}さんの運勢:<span class="${className}">${arr[random]}</span>`;
    });
  </script>
</body>

</html>

    解决方案：

    1. 在 <head> 标签内定义 CSS 类，为每种颜色分配一个类名。
    2. 删除错误地对数组元素应用样式的部分。
    3. 使用 switch 语句根据随机数确定要应用的颜色类名。
    4. 在设置 result.innerHTML 时，将选中的字符串包裹在带有相应颜色类名的 <span> 标签内，以便应用颜色样式。
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • js代码-练习JavaScript的数组、对象类型
    2021-07-16 12:40
    在JavaScript编程语言中，数组和对象是两种非常重要的数据结构，它们被广泛用于存储和处理数据。本练习主要关注如何理解和使用这两种数据类型。 数组在JavaScript中是一种有序的数据集合，可以容纳不同类型的值，如...
  • js代码-数组去重相加
    2021-07-16 13:07
    在JavaScript编程语言中，"数组去重相加"是一个常见的操作，它涉及到对数组元素的处理，包括消除重复项和对非重复元素进行累加。这个任务通常在数据分析、数据清洗或者算法实现中出现。接下来，我们将深入探讨如何在...
  • 12、各编程语言中的数组：特性与应用对比
    2025-07-24 03:17
    soda5的博客 本文详细对比了多种编程语言（包括 Java、JavaScript、Kotlin、Python、Ruby、Rust 和 Swift）中数组的特性与应用。涵盖了数组的基本介绍、关键特性、初始化方式、迭代方法、操作技巧以及多维数组的实现。通过对比...
  • JS数组操作方法[代码]
    2025-11-24 04:37
    JavaScript是一种广泛使用的高级编程语言，它为网页和网络应用程序提供了动态交互的功能。在JavaScript中，数组是一种重要的数据结构，它提供了一组有序的元素集合，这些元素可以是数字、字符串、对象甚至其他数组。...
  • js代码-数组元素交换位置
    2021-07-14 23:03
    在JavaScript（简称JS）编程语言中，数组是一种常见的数据结构，用于存储一组有序的值。在处理数组时，有时我们需要交换数组中特定位置的元素。本文将深入探讨如何在JavaScript中实现这一操作，并通过示例代码进行...
  • JS数组循环方法[代码]
    2025-11-15 07:24
    JavaScript是一种广泛使用的脚本语言，尤其在前端开发中占据重要地位。数组作为编程中常见的数据结构，在JavaScript中同样扮演着核心角色。为了高效地处理数组，JavaScript提供了多种循环方法，每种方法都有其独特的...
  • JS数组函数解析[代码]
    2025-12-19 06:57
    JavaScript作为一门广泛使用的编程语言，在开发过程中数组的处理是必不可少的环节。数组是一种特殊的数据结构，它能够存储一系列的元素，并且这些元素可以是任意类型，包括基本数据类型如数字和字符串，也可以是引用...
  • js代码-查找数组中最大最小值
    2021-07-16 13:08
    在JavaScript编程语言中，查找数组中的最大值和最小值是一项常见的任务。这通常涉及到遍历数组元素并比较它们的大小。下面将详细讲解如何通过JavaScript实现这个功能。 首先，我们来看如何查找数组中的最大值。...
  • JS数组常用方法[代码]
    2025-11-14 10:58
    在JavaScript开发过程中，数组操作是基础而频繁的任务之一，涉及到数据的增删改查等操作。数组方法在编程中扮演着重要角色，尤其是在处理集合数据时，能够极大提高开发效率和程序的可读性。 首先，我们来了解改变原...
  • 编程语言中的数组与集合处理比较分析
    2025-03-31 13:09
    方祯的博客 本文档通过比较分析多种编程语言（包括C#、C++、Go、Java、JavaScript、Python、Ruby、Rust和Swift）中的数组和集合的实现与使用，突出了它们之间的关键差异与相似之处。文章展示了各种语言在类型安全、性能优化、...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 3月17日
  • 已采纳回答 3月9日
  • 修改了问题 3月9日
  • 创建了问题 3月9日