javascript how to set variables to be equal both ways?

April 21, 2022

I set some variables to make meters to feet …
let feet = meter * 3.280 but i have set meters = number also
so i cant set meter = feet / 3.28 to get ther result that i want

how can i do that so it gives the right result?

in mathematics you can write meter <=> feet / 3.28

This is the wrong result that i get with my variables
2 meters=6.56feet| (2 feet=2 meters)

any help on how to structure it correctly?
thank you

(it says i need for explanation to post this )………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………….

let number = 2 
let meter = number
let feet = meter * 3.280
let calculate = document.getElementById("meterscalc")
document.getElementById("placenumber").textContent = number

function calc () {
   
    calculate.textContent = number +" meters=" + feet + "feet" + "|" + number + " feet=" + meter +" meters"
    
}

calc()

HTML, body{
    margin: 0;
    padding: 0;
}


body {
    background-color: rgb(7, 7, 58);
    color: aliceblue;
}

#numbermetric {
    background:linear-gradient(
        230deg, #F38B17 0%, #ED4880 100%
    );
    height: 300px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    position: relative;
    text-align: center;
    padding-top: 20px;
}

#text1 {
    font-size: 2em;
}

#placenumber {
    font-size: 5em;
}
#calculations{
    padding-top: 30px;
}
#calculations > div{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    text-align: center;
    margin-bottom: 10px;
}

<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>solo project</title>
</head>
<body>
    <div id="numbermetric">
        <div id="text1">Metric/Imperial unit conversion</div>
        <div id="placenumber">0</div>     
    </div>
    <div class:="flexbox" id="calculations">
        <div class="len">Length (Meter/feet)</div>
        <div id="meterscalc">0 meters=0.000feet | 0 feet=0.0000 meters</div>
        <div class="vol" >Volume (Liters/Gallons)</div>
        <div id="volumecalc">0 liters=0.000gallons | 0 gallons=0.000 0liters</div>
        <div class="mas">Mass (Kilograms/Pounds)</div>
        <div id="masscalc">0 Kilograms=0.000Pounds | 0 Pounds=0.0000 kilograms</div>

    </div>
    <script src="index.js"></script>
</body>
</html>

>Solution :

let number = 2 
let feetToMeter = number / 3.280
let meterToFeet = number * 3.280
let calculate = document.getElementById("meterscalc")
document.getElementById("placenumber").textContent = number

function calc () {
    // let meter = number
    // let feet = meter * 3.280
    calculate.textContent = number +" meters=" + meterToFeet + "feet" + "|" + number + " feet=" + feetToMeter +" meters"
    
}

calc()

HTML, body{
    margin: 0;
    padding: 0;
}


body {
    background-color: rgb(7, 7, 58);
    color: aliceblue;
}

#numbermetric {
    background:linear-gradient(
        230deg, #F38B17 0%, #ED4880 100%
    );
    height: 300px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    position: relative;
    text-align: center;
    padding-top: 20px;
}

#text1 {
    font-size: 2em;
}

#placenumber {
    font-size: 5em;
}
#calculations{
    padding-top: 30px;
}
#calculations > div{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: relative;
    text-align: center;
    margin-bottom: 10px;
}

<html lang="en">
<head>
    <link rel="stylesheet" href="index.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>solo project</title>
</head>
<body>
    <div id="numbermetric">
        <div id="text1">Metric/Imperial unit conversion</div>
        <div id="placenumber">0</div>     
    </div>
    <div class:="flexbox" id="calculations">
        <div class="len">Length (Meter/feet)</div>
        <div id="meterscalc">0 meters=0.000feet | 0 feet=0.0000 meters</div>
        <div class="vol" >Volume (Liters/Gallons)</div>
        <div id="volumecalc">0 liters=0.000gallons | 0 gallons=0.000 0liters</div>
        <div class="mas">Mass (Kilograms/Pounds)</div>
        <div id="masscalc">0 Kilograms=0.000Pounds | 0 Pounds=0.0000 kilograms</div>

    </div>
    <script src="index.js"></script>
</body>
</html>