切换功能香草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

service autofs restart
Rather than invoking init scripts through /etc/init.d, use the service(8)
utility, e.g. service autofs restart
/etc/init.d/autofs: line 54: initctl: command not found

Answer 2

你走了。使用简单的boolean值来告诉函数执行哪部分代码。

<强> CodePen link

＆＃13;

＆＃13;

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;
  }

}

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;