js-tasks/task16/js/main.js

/**
 * Get all dynamic text objects which will change
*/
const person_name = document.querySelector("#title--name");
const person_job = document.querySelector("#title--job");
const person_text = document.querySelector("#title--text");
const person_img = document.querySelector("#title--img");

/**
 * Get button objects
*/
const btn_prev = document.querySelector("#btn--prev");
const btn_next = document.querySelector("#btn--next");
const btn_random = document.querySelector("#btn--rnd");

/**
 * Setup event listners for buttons
*/
btn_prev.addEventListener("click", prev_person);
btn_next.addEventListener("click", next_person);
btn_random.addEventListener("click", random_person);

let current_person_index = 0;

const persons = [
  {
    id: 1,
    name: 'Adam Smith',
    job: 'Web Developer',
    img: 'img/720x600.png',
    text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta cupiditate molestias consequuntur doloremque quae est maxime assumenda at, voluptatem non?'
  },
  {
    id: 2,
    name: 'Какой-то чел #1',
    job: 'Без работный',
    img: 'img/720x600.png',
    text: 'Какой-то текст #1'
  },
  {
    id: 3,
    name: 'Какой-то чел #2',
    job: 'C++ developer',
    img: 'img/EZ.png',
    text: 'Оч крутой чел, короче EZ'
  },
  {
    id: 4,
    name: 'Какой-то чел #3',
    job: 'Криптовалютный инвестор',
    img: 'img/720x600.png',
    text: 'Ку всем! Я не могу сейчас говорить, я на алгебре'
  }
];

function prev_person()
{
  if (--current_person_index < 0)
  {
    current_person_index = persons.length - 1;
  }
  update_data();
}

function next_person()
{
  if (++current_person_index > (persons.length - 1))
  {
    current_person_index = 0;
  }
  update_data();
}

function random_person()
{
  current_person_index = Math.floor(Math.random() * (persons.length - 1));
  if (current_person_index > (persons.length - 1))
  {
    current_person_index = persons.length - 1;
  }
  else if (current_person_index < 0)
  {
    current_person_index = 0;
  }
  update_data();
}

function update_data()
{
  person_name.textContent = persons[current_person_index].name;
  person_job.textContent = persons[current_person_index].job;
  person_text.textContent = persons[current_person_index].text;
  person_img.src = persons[current_person_index].img;
}