CODEWITHSUNDEEP
javascripthtmlcss
Add it yeah
Add it yeah

Reputation: 321

Button value not changing

There are some buttons in my code. When I click on a button, I want the value of another button to change. However, it is not. Code-

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>The Aaditya Converter</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!-- Title and Intro -->
        <h1>Conversion</h1>
        <p>Don't know how to convert? Too lazy to open a calculator? Don't worry, We have you covered!</p>

        <!-- The conversion part -->
        <input type="text" placeholder="Value 1" id="value1">
        <div class="dropdown">
            <button class="dropbtn">Select conversion method</button>
            <div class="dropdown-content">
                <input type="button" id="f-to-c" value="Farenheit to Celsius"> <br>
                <input type="button" id="c-to-f" value="Celsius to Fahrenheit"> <br>
                <input type="button" id="m-to-k" value="Metre to Kilometre"> <br>
                <input type="button" id="k-to-m" value="Kilometre to Metre"> <br>
            </div>
            <input type="text" placeholder="Value 2" id="value2">
        </div>

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

CSS

/* For the dropdown menu */

/* Put everything on the same line */
#value1,
#dropbtn, 
#value2 {
    display: inline;
}

#value1 {
    float: left;
    margin-right: 20px;
}

#value2 {
    margin-left: 20px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    z-index: 1;
    margin-left: 185px;
}

.dropdown-content p {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content p:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

#dropdown:hover #dropbtn {background-color: #3e8e41;}

.dropdown {
    flex-direction: row;
}

JavaScript

// calculation options
const fahToCel = document.getElementById("f-to-c"); // fahrenheit to celcius
const celToFah = document.getElementById("c-to-f"); // celsius to fahrenheit
const mToKm = document.getElementById("m-to-k"); // metre to kilometre
const kmToM = document.getElementById("k-to-m"); // kilometre to metre

// dropdown button
const dropDownBtn = document.getElementById("dropbtn");

fahToCel.addEventListener("click", function() {
    dropDownBtn.value = fahToCel.value;
});

However, when the fahToCel button is clicked, the dropDownBtn's value is not changing to fahToCel's value. Why? and how do I fix it?

Upvotes: 0

Views: 71

Answers (1)

Derek Wang
Derek Wang

Reputation: 10193

  • You have not set the id of .dropbtn class. Please set it as dropbtn followign the javascript code.
  • To set the value of dropbtn button, pls use innerText.

I have attached the working example.

// calculation options
const fahToCel = document.getElementById("f-to-c"); // fahrenheit to celcius
const celToFah = document.getElementById("c-to-f"); // celsius to fahrenheit
const mToKm = document.getElementById("m-to-k"); // metre to kilometre
const kmToM = document.getElementById("k-to-m"); // kilometre to metre

// dropdown button
const dropDownBtn = document.getElementById("dropbtn");

fahToCel.addEventListener("click", function() {
    dropDownBtn.innerText = fahToCel.value;
});
#value1,
#dropbtn, 
#value2 {
    display: inline;
}

#value1 {
    float: left;
    margin-right: 20px;
}

#value2 {
    margin-left: 20px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    z-index: 1;
    margin-left: 185px;
}

.dropdown-content p {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content p:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

#dropdown:hover #dropbtn {background-color: #3e8e41;}

.dropdown {
    flex-direction: row;
}
<!-- Title and Intro -->
<h1>Conversion</h1>
<p>Don't know how to convert? Too lazy to open a calculator? Don't worry, We have you covered!</p>

<!-- The conversion part -->
<input type="text" placeholder="Value 1" id="value1">
<div class="dropdown">
    <button class="dropbtn" id="dropbtn">Select conversion method</button>
    <div class="dropdown-content">
        <input type="button" id="f-to-c" value="Farenheit to Celsius"> <br>
        <input type="button" id="c-to-f" value="Celsius to Fahrenheit"> <br>
        <input type="button" id="m-to-k" value="Metre to Kilometre"> <br>
        <input type="button" id="k-to-m" value="Kilometre to Metre"> <br>
    </div>
    <input type="text" placeholder="Value 2" id="value2">
</div>

Upvotes: 2

Related Questions