css 我如何才能使结果显示时，点击选择没有按钮，并显示在文本框中

hwazgwia 于 2023-10-21 发布在其他

关注(0)|答案(4)|浏览(116)

，我想输出像这样的图片我不知道如何在文本框中显示结果，并在选择温度.
enter image description here
`
温度转换器主体{ font-family：宋体，无衬线;文本对齐：居中;边距：30px; border-width：12盖;边框颜色：black; }

label {
        display:ruby-base;
        margin-bottom: 10px;
    }

    input {
        padding: 10px;
        margin: 20px;
    }

    button {
        padding: 10px;
       
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    #result {
        font-size: 18px;
        margin-top: 20px;
    }
</style>

<h2>Temperature Converter</h2>

<label for="temperature">Temperature:</label>
<input type="text" id="temperature" placeholder="Temperature">
<br></br>


<select id="unit">
    <option value="celsius">C</option>
    <option value="fahrenheit">F</option>
</select><br></br>

<br></br>

<div id="result"></div>

<script>
    function convertTemperature() {
        // Get input values
        var temperature = parseFloat(document.getElementById('temperature').value);
        var unit = document.getElementById('unit').value;

        // Check if the input is a valid number
        if (isNaN(temperature)) {
            alert("Please enter a valid temperature!");
            return;
        }

        // Convert temperature based on the selected unit
        var result;
        if (unit === 'celsius') {
            result = (temperature * 9/5) + 32;
            document.getElementById('result').innerHTML = temperature  + result.toFixed(2) ;
        } else {
            result = (temperature - 32) * 5/9;
            document.getElementById('result').innerHTML = temperature  + result.toFixed(2) ;
        }
    }
</script>

` pleas help me with this我找不到答案

css

来源：https://stackoverflow.com/questions/77320747/how-i-can-make-the-result-show-when-click-on-select-without-button-and-display-o

4条答案

按热度按时间

lg40wkob1#

将事件侦听器添加到将调用函数的输入和输出中。

document.getElementById('temperature').addEventListener('input', convertTemperature);
document.getElementById('unit').addEventListener('change', convertTemperature);

赞(0）回复(0）举报 2023-10-21

col17t5w2#

你好，我的朋友，你的用户界面有点混乱，因为当你想把某物转换成某物时，最好让你的用户知道哪个单位转换成另一个单位。所以最好在选项标签中写上“c => f”或“f => c”。
最简单的显示结果的方法是将eventtool添加到您的（id =“temperature”）中并更改值。像下面

enter code here
document.getElementById('temperature').addEventListener('change', convertTemperature);

你可以像这样在“温度”函数结束时更新结果

enter code here
if (unit === 'celsius') {
        let farenhite = (temperature * 9/5) + 32;
        result = Number(temperature).toFixed(2) + Number(farenhite).toFixed
        document.getElementById('result').innerHTML = Number(result).toFixed(2) ;
    } else {
        let celsius = (temperature - 32) * 5/9;
        result = Number(temperature).toFixed(2) + Number(celsius).toFixed;
        document.getElementById('result').innerHTML = Number(result).toFixed(2);
    }

在此之后，结果中的小数点将固定为两位。

赞(0）回复(0）举报 2023-10-21

ws51t4hk3#

你已经定义了一个函数convertTemperature()，但从未调用过它。
您可以创建一个按钮，将onclick属性设置为convertTemperature()，以便在单击该按钮时调用该函数。
它看起来像这样-

function convertTemperature() {
        // Get input values
        var temperature = parseFloat(document.getElementById('temperature').value);
        var unit = document.getElementById('unit').value;

        // Check if the input is a valid number
        if (isNaN(temperature)) {
            alert("Please enter a valid temperature!");
            return;
        }

        // Convert temperature based on the selected unit
        var result;
        if (unit === 'celsius') {
            result = (temperature * 9/5) + 32;
            document.getElementById('result').innerHTML = temperature  + result.toFixed(2) ;
        } else {
            result = (temperature - 32) * 5/9;
            document.getElementById('result').innerHTML = temperature  + result.toFixed(2) ;
        }
    }

<body>
        
        
        <h2>Temperature Converter</h2>
        
        <label for="temperature">Temperature:</label>
        <input type="text" id="temperature" placeholder="Temperature">
        <br></br>
        
        
        
        <select id="unit">
            <option value="celsius">C</option>
            <option value="fahrenheit">F</option>
        </select><br></br>
        
        
        <br></br>
        
        <div id="result"></div>
        <button onclick="convertTemperature()">submit</button>
    </body>

赞(0）回复(0）举报 2023-10-21

g6ll5ycj4#

你只需要在输入和选择元素上调用函数，尝试像这样替换代码，<select id="unit" onchange="convertTemperature()">和输入组件<input type="text" id="temperature" placeholder="Temperature" onkeypress="convertTemperature()">

赞(0）回复(0）举报 2023-10-21

我来回答

css 我如何才能使结果显示时，点击选择没有按钮，并显示在文本框中

4条答案

相关问题

热门标签

最新问答