Answer to Question #327062 in HTML/JavaScript Web Application for Bylapati suresh kumar

Question

Answer to Question #327062 in HTML/JavaScript Web Application for Bylapati suresh kumar

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #327062

capital country

When the capital name is changed in the HTML select element then the text content in the HTML paragraph element should be the country name of the selected capital.

this case is error please help

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Capital and Country</title>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <h1 class="title">Capital and Country</h1>
            <div class="content">
                <select name="capital" id="capital" class="capital" onchange="changeCapital(this)">
                    <option value="France">Paris</option>
                    <option value="United Kingdom">London</option>
                    <option value="USA">New York</option>
                    <option selected value="India">New Delhi</option>
                </select>
                <p class="text">is the capital of?</p>
            </div>
            <div class="country">
                <p id="country">India</p>
            </div>
        </div>
    </div>





    <style>
        .wrapper {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #000;
        }
        .container {
            width: 450px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 30px;
        }
        .container p {
            margin: 0;
            padding: 0;
        }
        .title {
            font-size: 48px;
            font-weight: bold;
            color: #454545;
            text-align: center;
            padding: 0;
            margin: 0;
        }
        .content {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 20px;
            padding: 30px 18px;
        }
        .capital {
            height: 40px;
            margin-right: 24px;
            padding: 10px 10px;
            font-size: 16px;
            font-weight: 500;
        }
        .country {
            padding: 0 18px;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
    <script>
        function changeCapital(select) {
            let country = document.getElementById('country');


            country.innerText = select.value;
        }
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #327062 in HTML/JavaScript Web Application for Bylapati suresh kumar

Comments

Leave a comment

Related Questions