增加/減少按鈕在 JavaScript 中不起作用

Question

I'm relatively new to JavaScript and have some experience with HTML and CSS and I am looking to improve my understanding on web dev as a whole. 我需要在我之前完成的網站中包含按鈕，並通過添加按鈕來增加/減少網站上的文本以使其更易於訪問。 無論我嘗試什么，我似乎都無法讓我的 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"
}

Answer 1

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>

它就是這樣工作的。

Answer 2

我建議像這樣附加一個事件偵聽器：

smallButton.addEventListener('click', (e) => {
  content.style.fontSize = '10px';
});

如果您包含一些 HTML 標記，也會有所幫助。 在執行腳本期間，可能在頁面上找不到您的<button>元素或內容<div> ？

我注意到您的代碼中有很多重復。 有多種方法可以改進此代碼。 其中一些改進是使用數據結構 class 或一些數據屬性來跟蹤 state。

我還建議在px上使用em或rem單位來進行內容的整體縮放。

使用數據結構的示例

您可以通過提供映射到適當字體大小的數據屬性，使每個按鈕都保持 state。

 const content = document.querySelector('.content'); const fontSizes = { small: 0.75, normal: 1.00, large: 1.25 }; const changeFontSize = (e) => { const fontSizeEm = fontSizes[e.target.dataset.size]; content.style.fontSize = `${fontSizeEm}em`; }; document.querySelectorAll('.text-sizer-btn').forEach(btn => btn.addEventListener('click', changeFontSize));

 .text-sizer { display: flex; flex-direction: row; justify-content: flex-end; }.text-sizer-btn:nth-child(2) { margin: 0 0.5em; }

 <div class="text-sizer"> <button class="text-sizer-btn" data-size="small">Small</button> <button class="text-sizer-btn" data-size="normal">Normal</button> <button class="text-sizer-btn" data-size="large">Large</button> </div> <div class="content"> <h1>Lorem Ipsum</h1> <h2>What is Lorem Ipsum?</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div>

使用 class 的示例

如果您想使用 class 名稱而不是 JavaScript object，您可以嘗試以下操作：

 const content = document.querySelector('.content'); const buttons = document.querySelectorAll('.text-sizer-btn'); const changeFontSize = (e) => buttons.forEach(btn => content.classList.toggle(`size-${btn.dataset.size}`, btn === e.target)); buttons.forEach(btn => btn.addEventListener('click', changeFontSize));

 .text-sizer { display: flex; flex-direction: row; justify-content: flex-end; }.text-sizer-btn:nth-child(2) { margin: 0 0.5em; }.size-small { font-size: 0.75em; }.size-normal { font-size: 1.00em; }.size-large { font-size: 1.25em; }

 <div class="text-sizer"> <button class="text-sizer-btn" data-size="small">Small</button> <button class="text-sizer-btn" data-size="normal">Normal</button> <button class="text-sizer-btn" data-size="large">Large</button> </div> <div class="content"> <h1>Lorem Ipsum</h1> <h2>What is Lorem Ipsum?</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div>

僅使用具有 styles 的數據屬性的示例

這是一個僅使用數據屬性的示例：

 const content = document.querySelector('.content'); const changeFontSize = (e) => (content.dataset.fontSize = e.target.dataset.size); document.querySelectorAll('.text-sizer-btn').forEach(btn => btn.addEventListener('click', changeFontSize));

 .text-sizer { display: flex; flex-direction: row; justify-content: flex-end; }.text-sizer-btn:nth-child(2) { margin: 0 0.5em; }.content[data-font-size="small"] { font-size: 0.75em; }.content[data-font-size="normal"] { font-size: 1.00em; }.content[data-font-size="large"] { font-size: 1.25em; }

 <div class="text-sizer"> <button class="text-sizer-btn" data-size="small">Small</button> <button class="text-sizer-btn" data-size="normal">Normal</button> <button class="text-sizer-btn" data-size="large">Large</button> </div> <div class="content"> <h1>Lorem Ipsum</h1> <h2>What is Lorem Ipsum?</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div>

Answer 3

由於我們只處理三種可能的文本大小（小、正常和大），您可以創建 CSS 規則來處理每種情況，然后您可以在單擊按鈕時將這些類添加/刪除到content中：

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

Answer 4

我認為這種方法應該可以解決您的問題。 我已經測試過了。 這種方式有點簡單，但它可以完成工作。

<script>

function makeSmall(){

document.getElementById("textTobeChanged").style.fontSize = 10;
}
function makeNormal(){

document.getElementById("textTobeChanged").style.fontSize = 14;
}
function makeBig(){

    document.getElementById("textTobeChanged").style.fontSize = 20;
}
</script>
<button  onclick="makeSmall()">
    Small
    </button>
    <button  onclick="makeNormal()">
        Normal
        </button>
<button onclick="makeBig()">
Large
</button>
<div id="textTobeChanged">Text</div>