Получить случайный элемент из некоторых объектов в Array Javascript

Привет, разработчики, я хочу получить случайные данные из некоторых объектов в массиве, но когда я хочу отобразить его, он говорит, что объект [объект], который не отображает текст из объекта, я пробовал так много методов, но не работал любое решение? большое спасибо кто мне поможет

let bill = [
 {
   name : "Sandra",
     price : "50$",
     payment : "visa",
     cardnumber:"1234 5678 9012 3456"
 },
  {
   name : "Johnson",
     price : "200$",
     payment : "master",
     cardnumber:"1234 5678 9012 3456"
 },
 ]
 
 let get  = document.querySelector(".get");
 let first =  document.querySelector(".first");
  let second =  document.querySelector(".second");
     let third =  document.querySelector(".third");
      let fourth=  document.querySelector(".fourth");
        
get.addEventListener("click" , ()=> {
let text= bill[Math.floor(Math.random()* bill.length)];

first.innerHTML =  text;
second.innerHTML = text;
third.innerHTML =  text;
fourth.innerHTML =  text;

})

body {
 font-family:"Lato",sans-serif;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}

<body>

<h1>
Get latest invoice
</h1>
<button class = "get">Get</button>
<table >
  <tr>
    <th>Name</th>
    <th>Price</th> 
    <th>Payment</th>
            <th>Card Number</th>

  </tr>
  <tr>
    <td class = "first"></td>
    <td class = "second "></td>
    <td class = "third"></td>
            <td class = "fourth"></td>

  </tr>
    </table>
    </body>

javascript html css arrays object

11.12.2020 00:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

108

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это возвращает [объект], потому что текстовая переменная является объектом, поэтому, если вы хотите получить имя, которое вы должны получить, вызвав его ключ как first.innerHtml = text.name (чтобы получить имя)

<!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>

  <style>
    body {
      font-family: "Lato", sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
  </style>
  <body>
    <h1>Get latest invoice</h1>
    <button class = "get">Get</button>
    <table>
      <tr>
        <th>Name</th>
        <th>Price</th>
        <th>Payment</th>
        <th>Card Number</th>
      </tr>
      <tr>
        <td class = "first"></td>
        <td class = "second"></td>
        <td class = "third"></td>
        <td class = "fourth"></td>
      </tr>
    </table>
  </body>

  <script>
    let bill = [
    {
      name : "Sandra",
        price : "50$",
        payment : "visa",
        cardnumber:"1234 5678 9012 3456"
    },
      {
      name : "Johnson",
        price : "200$",
        payment : "master",
        cardnumber:"1234 5678 9012 3456"
    },
    ]

    let get  = document.querySelector(".get");
    let first =  document.querySelector(".first");
    let second =  document.querySelector(".second");
    let third =  document.querySelector(".third");
    let fourth=  document.querySelector(".fourth");

    get.addEventListener("click" , ()=> {
    let text= bill[Math.floor(Math.random()* bill.length)];
    console.info(text);

    first.innerHTML =  text.name;
    second.innerHTML = text.name;
    third.innerHTML =  text.name;
    fourth.innerHTML =  text.name;

    })
  </script>
</html>

11.12.2020 00:55

Другие вопросы по теме

Как опубликовать первое значение набора запросов в HTML?

Angular - снять все флажки

Почему между моим логотипом и панелью навигации есть огромный кликабельный разрыв и как от него избавиться?

Как браузеры решают, какие данные использовать для автозаполнения при каждом вводе?

Почему мой логотип не масштабируется/не изменяется в размере html/css?

Параметр «масштабы» ломает график Chart.js

Как я могу оформить псевдоэлемент как заголовок абзаца?

Как изменить цвет текста кнопки при наведении HTML

Как сделать так, чтобы addEventListener нажимал условную работу с переключателями в hbs

Удалить дочерний div из родительского div

Получить случайный элемент из некоторых объектов в Array Javascript

Ответы 1

Другие вопросы по теме

Похожие вопросы