如何根据 function 更改变量的值？

Question

我正在尝试构建一个小程序，以显示特定车辆绕行星运行需要多长时间。 例如，一辆时速 100 英里的汽车在 79.17 小时内绕地球运行（7917 英里）等等。

为了显示车辆，我使用了图标并显示我使用了 img 的行星。 我可以给图标赋值（在这种情况下，我已经给了它们的速度值，以 mph 为单位）但是对于图像，由于某种原因，我不能给出值，因为我想将其用作行星的半径。

目前我有

 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>

正如您在上面看到的，let planet = 7917.5 是地球半径，因此答案容器将 output 的值“行星”/活动图标的值“活动”。 如何根据当前处于活动状态的行星（“活动行星”）来改变“行星”的值。 例如，海王星是 30,000，所以我希望“行星”值是 30,000 / 图标的值（汽车时速 100 英里）。

任何帮助将不胜感激。

Answer 1

除了使用value属性，您还可以使用data-<name>属性。

IE。

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

然后您可以通过以下方式访问此值：

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

编辑：我添加了一个可运行的代码片段示例来展示我将如何处理您的程序。

我发现将相关逻辑分解为单独的函数很有帮助，特别是当我想在多个地方（在每个按钮侦听器中）使用相同的逻辑时。

在这种情况下，我创建了一个setActiveClasses() function 和renderOrbitDuration() function。

我们使用每个（ activeVehicleIndex和activePlanetIndex ）的索引（0、1、2 等）来跟踪活动的车辆和行星。

这些按钮只是增加和减少相关索引，然后setActiveClasses() function 和renderOrbitDuration() function 使用该索引设置正确的活动类并渲染轨道持续时间。

通读并运行下面的代码段。

 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>