切换功能香草JavaScript

Question

单击温度时，我想在度和华氏度之间切换。

单击度将华氏度更改为华氏度时，我已经设法做到了，但是现在单击华氏度时如何将其更改回度度？

    temp.addEventListener('click', degreeToF);

    function degreeToF() {
     const f = manchester.current.temp_c * 1.8 + 32;
     temp.innerHTML = f.toFixed(0) + '<span class="degrees"> f </span>';
    }

这是我的代码笔： https ://codepen.io/o-sewell/pen/mRyEyW

Answer 1

var showing = 'F';
temp.addEventListener('click', degreeToF);

function degreeToF() {
 if(showing === 'F'){
   // convert to C
   showing = 'C';
   const f = (manchester.current.temp_c - 32 ) * 5/9;
   temp.innerHTML = f.toFixed(0) + '<span class="degrees"> c </span>';
 } else {
   // convert to 
   showing = 'F';
   const f = manchester.current.temp_c * 1.8 + 32;
   temp.innerHTML = f.toFixed(0) + '<span class="degrees"> f </span>';

 }
}

Answer 2

干得好。 使用简单的boolean值告诉函数要执行代码的哪一部分。

CodePen链接

 const weather = 'https://api.apixu.com/v1/current.json?key=cd93499e97644fcc873154715163112&q=Manchester'; const baseColors = ["#C2272D", "#F8931F", "#FFFF01", "#009245", "#0193D9", "#0C04ED", "#612F90"]; const tintColors = ["#F8DDDE", "#FEDBB4", "white", "#0193D9", "#009245", "#E7E6F9"]; let manchester = []; fetch(weather) .then((blob) => blob.json()) .then((data) => manchester = data) .then((data) => displayWeather(data)); let iconWeather = document.querySelector('#weather'); let temp = document.querySelector('#temp'); let textLocation = document.querySelector('#text-location'); let textWeather = document.querySelector('#text-weather'); function displayWeather() { iconWeather.src = manchester.current.condition.icon; temp.innerHTML = manchester.current.temp_c + '<span class="degrees"> c </span>'; textLocation.innerHTML = manchester.location.name; textWeather.innerHTML = manchester.current.condition.text; }; const background = document.querySelector('.weather'); window.addEventListener('load', changeBackground); function changeBackground() { let random = Math.floor(Math.random() * baseColors.length); let randomBaseColor = baseColors[random]; let randomTintColor = tintColors[random]; background.style.background = 'linear-gradient(0deg,' + randomBaseColor + ',' + randomTintColor + ')'; background.style.transition = 'background , 2s, ease'; } setInterval(changeBackground, 2500); temp.addEventListener('click', degreeToF); var x = true; function degreeToF() { if (x) { const f = manchester.current.temp_c * 1.8 + 32; temp.innerHTML = f.toFixed(0) + '<span class="degrees"> f </span>'; x = !x; } else { const f = manchester.current.temp_c; temp.innerHTML = f.toFixed(0) + '<span class="degrees"> c </span>'; x = !x; } } 

 * { box-sizing: border-box; } .wrapper { margin: 50px; } .weather { max-width: 90%; margin: 0 auto; background: pink; padding: 20px; box-shadow: 0 5px rgba(0, 0, 0, 0.1); border-radius: 6px; } @media (min-width: 800px) { .weather { max-width: 40%; } } .weather__temperature { margin-top: 50px; text-align: center; } .weather__temperature--temp { font-size: 80px; cursor: pointer; } .weather__text { text-align: center; } .weather__text--description { color: black; font-size: 18px; } .weather__icon { margin-top: 5px; } .weather__icon--image { display: block; margin: 0 auto; padding: 5px 0; width: 150px; height: auto; } .weather__location { text-align: center; } .weather__location--text { letter-spacing: 5px; font-size: 22px; margin-bottom: 50px; } .degrees { color: red; font-size: 20px; } 

 <div class="wrapper"> <div class="weather"> <div class="weather__temperature" /> <p class="weather__temperature weather__temperature--temp" id="temp"></p> </div> <div class="weather__text"> <p class="weather__text weather__text--description" id="text-weather"></p> </div> <div class="weather__icon"> <img class="weather__icon weather__icon--image" id="weather" src="" /> </div> <div class="weather__location"> <p class="weather__location--text" id="text-location"></p> </div> </div> </div>