用 if 语句“检查”不能正常工作

Question

大家好，我正在制作计算器应用程序，但遇到了问题。 我制作了 3 个单选按钮，并希望在 JS 文件中使用“if 语句”来检查它们。 它根本不起作用，因为当点击 input2 或 3 时，'main' 没有得到任何 class。 只有第一个使“主要”得到它，但那是因为 input1.checked 默认设置为 true。 任何人都可以帮助我吗？

这是我的 github 上的项目链接： https://github.com/Adrian397/frontEndMentorChallenges/tree/master/calculator-app-main

这里是它的现场： https://adrian397.github.io/frontEndMentorChallenges/calculator-app-main/index.ZFC35FDC70D5FC69D2639883A82EZC7A

js文件html文件

Answer 1

真的很喜欢你的不同主题的想法。

来到您的查询。 看起来您一直在使用 const 作为主变量。 因此，您将无法更改它。 如果您可以将变量更改为 var 或 let，这将有所帮助。

注意：当您确定不会更改该变量时，请始终使用 const。

此外，如果您可以使用，这是一个很好的习惯：

if(document.getElementById('input1').checked) {
                document.getElementById("main").innerHTML
                    = <Your code goes here>
            }

这简化了流程并为一页应用程序保持源代码清洁。

希望这可以帮助。 愿源与你同在！

Answer 2

首先，在您的 js 代码的第一行，您要声明let main= document.querySelector('main'); 这不能在那里工作，因为声明为 let 的变量只能在声明它的 function 中可见

它不在稍后声明的 function 的 scope 中（对它不可见）

那么您将输入声明为 const 并且可能会出现一些问题，因为常量无法更新，因此检查的 state 应该始终相同

您更正的代码应该是这样的

document.addEventListener("DOMContentLoaded", ()=>{
   let main = document.getElementById("main");
   let firstInput = document.getElementById("input1");
   let secondInput = document.getElementById("input2");
   let thirdInput = document.getElementById("input3");

   if(firstInput.checked == true){
      main.classList.add('dark');
   }else {
      main.classList.remove('dark');
   }
});

只需像上面这样添加其他“如果”。 还给 html 元素 main 提供一个 id 以从 id 获取它

Answer 3

我在另一个帖子上得到了帮助，所以我在这里粘贴了正确工作的代码：

let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");

input1.checked = true;

function setColorTheme() {
  if (input1.checked == true) {
    main.classList.add("dark");
  } else {
    main.classList.remove("dark");
  }
  if (input2.checked == true) {
    main.classList.add("light");
  } else {
    main.classList.remove("light");
  }
  if (input3.checked == true) {
    main.classList.add("saturated");
  } else {
    main.classList.remove("saturated");
  }
}

setColorTheme();

document.querySelectorAll('input[name="theme"]').forEach((e) => {
  e.addEventListener("change", setColorTheme);
});

通过添加这些行并使用“let”进行变量声明，问题得到了解决：

document.querySelectorAll('input[name="theme"]').forEach((e) => {
      e.addEventListener("change", setColorTheme);
    });