Javascript 如何根据函数更改变量的值？

我正试图建立一个小程序，显示某个飞行器绕行星运行需要多长时间。一辆时速100英里的汽车在79.17小时内绕地球运行（7917英里），等等

为了显示车辆，我使用了图标，为了显示行星，我使用了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>

let icons=[…document.querySelectorAll（'.icon container.fa'）；
让answerContainer=document.getElementById（“应答容器”）；
让answerDiv=document.getElementById（“answer div”）；
让planetImgs=[…document.queryselectoral（“.planet container img”）]；
//滑动图标的功能用户单击右/左以显示下一个/上一个车辆图标
功能调整激活（调整）{
var current=icons.find（it=>it.id=='active'）；
var currentIndex=图标。indexOf（当前）；
var nextIndex=（当前索引+调整）%icons.length；
如果（nextIndex<0）nextIndex=icons.length-1；
当前.removeAttribute（'id'）；
图标[nextIndex].id='active'；
//寻找轨道周期的行动
让planet=7917.5；**（我希望根据下面的函数进行更改）**
让nextElement=document.getElementById（“活动”）；
让nextElements=nextElement.getAttribute（“值”）
让轨道周期=行星/下一个元素；
answerDiv.innerHTML=orbitalPeriod.toFixed（2）；
}
//滑动行星的功能-用户单击右/左以显示下一个/上一个行星
功能调整活动行星（调整）{
var current=planetImgs.find（it=>it.id==='activeplanet'）；
var currentIndex=当前的计划指数；
var nextIndex=（当前索引+调整）%icons.length；
如果（nextIndex<0）nextIndex=平面长度-1；
当前.removeAttribute（'id'）；
planetImgs[nextIndex].id=‘活动行星’；
}//对于let“planets”，此函数的值需要在上面的函数中使用
//箭头按钮
document.querySelector（“#左箭头”）.addEventListener（'click'，e=>adjustActive（-1））；
document.querySelector（“#右箭头”）.addEventListener（'click'，e=>adjustActive（1））；
document.querySelector（“#左箭头行星”）.addEventListener（'click'，e=>adjustActivePlanet（-1））；
document.querySelector（“#右箭头行星”）.addEventListener（'click'，e=>adjustActivePlanet（1））；
飞行时间

如上所示，let planet=7917.5是地球半径，因此答案容器将输出“planet”的值/活动图标“active”的值。如何根据当前活动的行星（“活动行星”）更改“行星”的值。例如，海王星是30000，所以我希望“行星”的值是30000/图标的值（汽车每小时100英里）

---

任何帮助都将不胜感激。

您可以使用

数据-

属性，而不是使用

值

即

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

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

在这种情况下，我创建了一个
setActiveClasses（）
函数和
renderRorBitDuration（）
函数

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

按钮只需增加和减少相关索引，然后
setActiveClass（）
函数和
renderRorBitDuration（）
函数使用此索引设置正确的活动类并渲染轨道持续时间

通读并运行下面的代码段


让activeVehicleIndex=0
设activePlanetIndex=0
const vehiclelements=document.queryselectoral（“.vehicles i”）
const planetElements=document.queryselectoral（'.planets img'））
函数setActiveClass（）{
//清除旧的活动类
[…车辆要素，…飞机要素].forEach（el=>{
el.classList.remove（'active'）
})
//添加新的活动类
vehicleElements[activeVehicleIndex].classList.add（'active'）
planetElements[activePlanetIndex].classList.add（'active'）
}
函数renderRobbitDuration（）{
activeVehicleEl=车辆要素[activeVehicleIndex]
activePlanetEl=planetElements[activePlanetIndex]
常量html=`
车辆名称：${activeVehicleEl.dataset.Name}

车速：${activeVehicleEl.dataset.Speed}

行星名称：${activePlanetEl.dataset.Name}

行星半径：${activePlanetEl.dataset.Radius}

轨道周期：${activePlanetEl.dataset.radius/activeVehicleEl.dataset.speed}
`
document.querySelector（'.output'）。innerHTML=html
}
//上一个/下一个按钮侦听器
document.querySelector（'.vehicles.prev'）。addEventListener（'click'，（）=>{
activeVehicleIndex-->递减activeVehicleIndex
如果（activeVehicleIndex<0）{activeVehicleIndex=0}//不允许负值
setActiveClasses（）
RenderRorBitDuration（）
})
document.querySelector（'.vehicles.next'）。addEventListener（'click'，（）=>{
activeVehicleIndex++//增加activeVehicleIndex
如果（activeVehicleIndex>vehicleElements.length-1）{activeVehicleIndex=vehicleElements.length-1}//不允许值大于车辆数
setActiveClasses（）
RenderRorBitDuration（）
})
document.querySelector（'.planets.prev'）.addEventListener（'click'，（）=>{
活动平面索引--//
<img src="images/neptune planet.png" alt="" class="planet" data-radius="30000">

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