增加/减少按钮在JavaScript中不起作用

我对JavaScript比较陌生，对HTML和CSS有一些经验，我希望从整体上提高对web开发的理解。我被要求在我之前完成的网站中包含按钮，并通过添加按钮来增加/减少网站上的文本，使其更易于访问。无论我尝试什么，我似乎都无法让我的JavaScript代码正常工作。任何帮助都将不胜感激。我的代码如下：

// this section is to decrease/increase the text on the website

var content = document.getElementById("content");
var smallButton = document.getElementById("small");
var normalButton = document.getElementById("normal");
var largeButton = document.getElementById("large");

// this section is to decrease the text size

smallButton.onclick = function (e){
    content.style.fontSize = "10px";
}

// this section is to set the text to the normal font
normalButton.onclick = function (e){
    content.style.fontSize = "14px";
}

// this section is the increase the text font
largeButton.onclick = function (e){
    content.style.fontSize = "20px"
}

JS

var content = document.getElementById("content");

var smallButton = document.getElementById("small");

var normalButton = document.getElementById("normal");

var largeButton = document.getElementById("large");

const myFunction = (size) => content.style.fontSize = size + "px";

HTML

<div id="content">
    Content Size
</div>

<button onclick="myFunction(10)"id"small">
  Small Button
</button>
<button id="normal">
  Medium Button
</button>
<button id="large">
  Large Button
</button>

内容大小
小按钮
中号按钮
大按钮

它就是这样工作的。

JS

var content = document.getElementById("content");

var smallButton = document.getElementById("small");

var normalButton = document.getElementById("normal");

var largeButton = document.getElementById("large");

const myFunction = (size) => content.style.fontSize = size + "px";

HTML

<div id="content">
    Content Size
</div>

<button onclick="myFunction(10)"id"small">
  Small Button
</button>
<button id="normal">
  Medium Button
</button>
<button id="large">
  Large Button
</button>

内容大小
小按钮
中号按钮
大按钮

---

它就是这样工作的。

我建议附加一个事件侦听器，如下所示：

smallButton.addEventListener（'click'，（e）=>{
content.style.fontSize='10px'；
});

如果包含一些HTML标记，也会有所帮助。执行脚本期间，页面上可能找不到您的

元素或内容

我注意到你的代码中有很多重复。有多种方法可以改进此代码。其中一些改进是使用数据结构、类或一些数据属性来跟踪状态

我还建议在

px

上使用

em

或

rem

单元来整体缩放内容

使用数据结构的示例 通过提供映射到适当字体大小的数据属性，可以使每个按钮保持一种状态

const content=document.querySelector（'.content'）；
常量字体大小={
小:0.75,，
正常:1.00,，
大号：1.25
};
常量changeFontSize=（e）=>{
const fontSizeEm=fontsizees[e.target.dataset.size]；
content.style.fontSize=`${fontSizeEm}em`；
};
document.querySelectorAll（'.text sizer btn'）.forEach（btn=>
btn.addEventListener（'click'，changeFontSize））
.text sizer{
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
}
.text sizer btn:第n个子项（2）{
边缘：0.5 em；
}

小的
正常的
大的
乱数假文
什么是Lorem Ipsum？
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。信息技术
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

我建议附加一个事件侦听器，如下所示：

smallButton.addEventListener（'click'，（e）=>{
content.style.fontSize='10px'；
});

如果包含一些HTML标记，也会有所帮助。执行脚本期间，页面上可能找不到您的
元素或内容

我注意到你的代码中有很多重复。有多种方法可以改进此代码。其中一些改进是使用数据结构、类或一些数据属性来跟踪状态

我还建议在
px
上使用
em
或
rem
单元来整体缩放内容

使用数据结构的示例
通过提供映射到适当字体大小的数据属性，可以使每个按钮保持一种状态


const content=document.querySelector（'.content'）；
常量字体大小={
小:0.75,，
正常:1.00,，
大号：1.25
};
常量changeFontSize=（e）=>{
const fontSizeEm=fontsizees[e.target.dataset.size]；
content.style.fontSize=`${fontSizeEm}em`；
};
document.querySelectorAll（'.text sizer btn'）.forEach（btn=>
btn.addEventListener（'click'，changeFontSize））
.text sizer{
显示器：flex；
弯曲方向：行；
证明内容：柔性端；
}
.text sizer btn:第n个子项（2）{
边缘：0.5 em；
}

小的
正常的
大的
乱数假文
什么是Lorem Ipsum？
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。信息技术
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

由于我们只处理三种可能的文本大小（小、普通和大），因此您可以创建CSS规则来处理每个场景，并在单击按钮时，从中可以将这些类添加/删除到
内容中：

<style>
  .content {
    font-size: 14px;
  }

  .text-small {
    font-size: 10px;
  }

  .text-large {
    font-size: 20px;
  }
</style>

<div id="content" class="content">THIS IS THE CONTENT</div>
<button id="small">small</button>
<button id="normal">normal</button>
<button id="large">large</button>

<script defer>
  var content = document.getElementById("content");
  var smallButton = document.getElementById("small");
  var normalButton = document.getElementById("normal");
  var largeButton = document.getElementById("large");

  smallButton.onclick = function (e) {
    content.classList.remove("text-large");
    content.classList.add("text-small");
  };

  normalButton.onclick = function (e) {
    content.classList.remove("text-large");
    content.classList.remove("text-small");
  };

  largeButton.onclick = function (e) {
    content.classList.add("text-large");
    content.classList.remove("text-small");
  };
</script>


.内容{
字体大小：14px；
}
.文本小{
字体大小：10px；
}
.文本大{
字体大小：20px；
}
这就是内容
小的
正常的
大的
var content=document.getElementById（“内容”）；
var smallButton=document.getElementById（“小”）；
var normalButton=document.getElementById（“正常”）；
var largeButton=document.getElementById（“大”）；
smallButton.onclick=函数（e）{
content.classList.remove（“文本大”）；
content.classList.add（“文本小”）；
};
normalButton.onclick=函数（e）{
content.classList.remove（“文本大”）；
content.classList.remove（“文本小”）；
};
largeButton.onclick=函数（e）{
content.classList.add（“文本大”）；
content.classList.remove（“文本小”）；
};
自从我们