Блог

Я пытаюсь создать небольшую программу, которая показывает, сколько времени требуется определенному транспортному средству для обращения вокруг планеты. Например, автомобиль со скоростью 100 миль в час облетает Землю (7917 миль) за 79,17 часов и т. Д.

Для отображения транспортных средств я использовал значки, а для отображения планет я использовал img. Я могу присвоить значения значкам (в данном случае я присвоил им значения скорости в милях в час) Но для изображений я по какой-то причине не могу дать значения, которые я хотел использовать в качестве радиуса планет.

В настоящее время у меня есть

  let icons = [...document.querySelectorAll('.icon-container .fa')];
 let answerContainer = document.getElementById("answer-container");
 let answerDiv = document.getElementById("answer-div");
 let planetImgs = [...document.querySelectorAll(".planet-container img")];


//Function to slide icons User clicks right/left to show next/previous vehicle icon

 function adjustActive (adjustment) { 
 var current = icons.find(it => it.id === 'active'); 
 var currentIndex = icons.indexOf(current);
 var nextIndex = (currentIndex   adjustment) % icons.length;

 if (nextIndex < 0) nextIndex = icons.length - 1;
current.removeAttribute('id');
icons[nextIndex].id = 'active'; 

// Action to find Orbital Period
let planet = 7917.5;  **(I WANT THIS TO CHANGE DEPENDING ON THE FUNCTION BELOW)**
let nextElement = document.getElementById("active");
let nextElements = nextElement.getAttribute("value")
let orbitalPeriod = planet / nextElements;

answerDiv.innerHTML = orbitalPeriod.toFixed(2);

}

// Function to slide planets - User clicks right/left to show next/previous planet

function adjustActivePlanet (adjustment) { 
var current = planetImgs.find(it => it.id === 'active-planet'); 
var currentIndex = planetImgs.indexOf(current);
var nextIndex = (currentIndex   adjustment) % icons.length;

if (nextIndex < 0) nextIndex = planetImgs.length - 1;
current.removeAttribute('id');
planetImgs[nextIndex].id = 'active-planet'; 

} // The value of this function needs to be used in the function above for let "planets"

//Arrow Buttons

document.querySelector('#left-arrow').addEventListener('click', e => adjustActive(-1));
document.querySelector('#right-arrow').addEventListener('click', e => adjustActive(1));
document.querySelector('#left-arrow-planet').addEventListener('click', e => adjustActivePlanet(-1));
document.querySelector('#right-arrow-planet').addEventListener('click', e => adjustActivePlanet(1));



    <div class="main-container">
    <div class="object-container">
        <div class="icon-container">
            <i class="fa fa-car" id="active" value="100"></i>
            <i class="fa fa-bicycle" value="25"></i>
            <i class="fa fa-plane" value="500"></i>
            <i class="fa fa-ship" value="10"></i>
            <i class="fa fa-fighter-jet" value="1000"></i>
            <i class="fa fa-space-shuttle" value="3000"></i>
        </div>
        <div class="arrow-buttons">
            <a href="#" class="right-arrow" id="right-arrow"></a>
            <a href="#" class="left-arrow" id="left-arrow"></a>
        </div>
        </div>
            <div class="answer-container" id="answer-container">
            <div id="answer-div"></div>
            <h3>Hours to orbit</h3>
        </div>
        <div class="planet-container">
            <img src="images/earth planet.png" alt="" id="active-planet">
            <img src="images/saturn planet.png" alt="" class="planet">
            <img src="images/neptune planet.png" alt="" class="planet">
            <img src="images/mercury planet.png" alt="" class="planet">
            <img src="images/sun.png" alt="" class="planet">
            <img src="images/mars planet.png" alt="" class="planet">
            <div class="arrow-buttons">
                <a href="#" class="right-arrow" id="right-arrow-planet"></a>
                <a href="#" class="left-arrow" id="left-arrow-planet"></a>
            </div>  
        </div>
    </div>
</div>
 

Как вы можете видеть выше, пусть планета = 7917,5 — это радиус земли, поэтому контейнер ответов выведет значение «планета» / значение активных значков «активный». Как я могу изменить значение «планеты» в зависимости от того, какая планета в данный момент активна («active-planet»). Например, Нептун равен 30 000, поэтому я хочу, чтобы значение «планета» было 30 000 / значение значка (автомобиль 100 миль в час).

Любая помощь будет принята с благодарностью.

Вместо использования value атрибута вы можете использовать data-<name> атрибут.

ie.

 <img src="images/neptune planet.png" alt="" class="planet" data-radius="30000">
 

Затем вы можете получить доступ к этому значению с помощью:

 document.querySelector('#active-planet').dataset.radius
 

РЕДАКТИРОВАТЬ: я добавил пример выполняемого фрагмента, чтобы показать, как я буду подходить к вашей программе.

Я считаю, что это помогает разбить связанную логику на отдельные функции, особенно когда я хочу использовать одну и ту же логику в нескольких местах (в каждом прослушивателе кнопок).

В этом случае я создал setActiveClasses() функцию и renderOrbitDuration() функцию.

Мы отслеживаем активное транспортное средство и планету, Используя индекс (0, 1, 2 и т. Д.) Для каждого ( activeVehicleIndex и activePlanetIndex ).

Кнопки просто увеличивают и уменьшают соответствующий индекс, а затем setActiveClasses() функция и renderOrbitDuration() функция используют этот индекс для установки правильных активных классов и отображения продолжительности обращения.

Прочитайте и запустите фрагмент ниже.

 let activeVehicleIndex = 0
let activePlanetIndex = 0

const vehicleElements = document.querySelectorAll('.vehicles i')
const planetElements = document.querySelectorAll('.planets img')

function setActiveClasses () {
  // Clear old active classes
   [...vehicleElements, ...planetElements].forEach(el => {
    el.classList.remove('active')
  })
  
  // Add new active classes
  vehicleElements[activeVehicleIndex].classList.add('active')
  planetElements[activePlanetIndex].classList.add('active')
}

function renderOrbitDuration () {
  activeVehicleEl = vehicleElements[activeVehicleIndex]
  activePlanetEl = planetElements[activePlanetIndex]
  
  const html = `
    Vehicle Name: ${activeVehicleEl.dataset.name}<br>
    Vehicle Speed: ${activeVehicleEl.dataset.speed}<br>
    Planet Name: ${activePlanetEl.dataset.name}<br>
    Planet Radius: ${activePlanetEl.dataset.radius}<br>
    Orbital Period: ${activePlanetEl.dataset.radius / activeVehicleEl.dataset.speed}
  `
  
  document.querySelector('.output').innerHTML = html
}

// Previous/Next Button Listeners
document.querySelector('.vehicles .prev').addEventListener('click', () => {
  activeVehicleIndex-- // Decrement activeVehicleIndex
  if (activeVehicleIndex < 0) { activeVehicleIndex = 0 } // Dont allow negative values
  setActiveClasses()
  renderOrbitDuration()
})

document.querySelector('.vehicles .next').addEventListener('click', () => {
  activeVehicleIndex   // Increment activeVehicleIndex
  if (activeVehicleIndex > vehicleElements.length - 1) { activeVehicleIndex = vehicleElements.length - 1 } // Dont allow values greater than number of vehicles
  setActiveClasses()
  renderOrbitDuration()
})

document.querySelector('.planets .prev').addEventListener('click', () => {
  activePlanetIndex-- // Decrement activePlanetIndex
  if (activePlanetIndex < 0) { activePlanetIndex = 0 } // Dont allow negative values
  setActiveClasses()
  renderOrbitDuration()
})

document.querySelector('.planets .next').addEventListener('click', () => {
  activePlanetIndex   // Increment activePlanetIndex
  if (activePlanetIndex > planetElements.length - 1) { activePlanetIndex = planetElements.length - 1 } // Dont allow values greater than number of planets
  setActiveClasses()
  renderOrbitDuration()
})

// Run both of these once on page load to set initial classes and render values
setActiveClasses()
renderOrbitDuration() 

 .vehicles, .planets {
  margin-bottom: 1em;
}

.vehicles .active {
  color: red;
}

.planets .active {
  border: 1px solid red;
} 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>

<!-- Vehicles -->
<div class="vehicles">
  <i class="fa fa-car" data-name="car" data-speed="100"></i>
  <i class="fa fa-bicycle" data-name="bike" data-speed="25"></i>
  <i class="fa fa-plane" data-name="plane" data-speed="500"></i>
  <i class="fa fa-ship" data-name="ship" data-speed="10"></i>
  <i class="fa fa-fighter-jet" data-name="fighter jet" data-speed="1000"></i>
  <i class="fa fa-space-shuttle" data-name="space shuttle" data-speed="3000"></i>
  <div>
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>

<!-- Planets -->
<div class="planets">
  <img src="http://via.placeholder.com/50" data-name="earth" data-radius="6000"/>
  <img src="http://via.placeholder.com/50" data-name="saturn" data-radius="60000"/>
  <img src="http://via.placeholder.com/50" data-name="neptune" data-radius="25000"/>
  <img src="http://via.placeholder.com/50" data-name="mercury" data-radius="2500"/>
  <img src="http://via.placeholder.com/50" data-name="sun" data-radius="700000"/>
  <img src="http://via.placeholder.com/50" data-name="mars" data-radius="3500"/>
  <div>
    <button class="prev">Prev</button>
    <button class="next">Next</button>
  </div>
</div>

<!-- Output -->
<div class="output"></div>