Question

很抱歉，如果标题没有解释清楚，我有这个页面，有两个按钮和一个文本块，一个用于增加该文本的大小，另一个用于减少它。我希望在文本达到最大或最小尺寸时禁用每个按钮。例如：

单击“更大”按钮，如果文本达到最大大小，则禁用该按钮。单击“Smaller”按钮，如果文本达到最小尺寸，则禁用该按钮。

我尝试在onclick函数中使用下一个if语句：

    if(currentSize== "66.6667pt"){bigger.disabled=true;}

其中66.6667pt是文本在保持固定之前达到的大小。另一种情况是，最小尺寸是6.75pt。

我不知道是否有更好的方法来验证文本是否达到其最小/最大尺寸，但这样我正在做它不起作用，“更大”按钮第二次被禁用文本达到66.6667pt，“较小”按钮永远不会被禁用。

这是整个html：

    <!DOCTYPE html>
    <html>
<head lang="es">
  <title>Find Bug Script</title>
  <meta charset="utf-8"> 
  <style>
  </style>
  <script>
     window.onload=function(){ 

          var smaller = document.getElementById("smaller");
          var hello = document.getElementById("hello");
          if(!hello.style.fontSize){hello.style.fontSize="12pt";} 
          var factor=0.75;
          bigger.onclick=function(){

             var currentSize=hello.style.fontSize;
            if(currentSize== "66.6667pt"){bigger.disabled=true;}
             var csz = parseInt(currentSize.replace("24pt", ""));
             if(csz > 60) return;
             csz/=factor;
             hello.style.fontSize= csz+"pt";


          }
          smaller.onclick=function(){

             if(hello.style.fontSize== "6.75pt"){smaller.disabled=true;}
             var currentSize=hello.style.fontSize;
             var csz = parseInt(currentSize.replace("24pt", ""));
             if(csz <= 6) return;
             csz*=factor;
             hello.style.fontSize= csz+"pt";
          }

     };
  </script>
</head>
<body>
    <input type=button value="Bigger" id="bigger"/>
    <input type=button value="Smaller" id="smaller" />
    <h1 id="hello" maxlength="5">¡Hello!</h1>
</body>

这是我的第一个HTML / JS课程，所以，让我们试着学习它。谢谢你的时间！

Answer 1

直接在fontSize属性上执行数学有点乱。

我不是每次都尝试读出文本大小，而是在我的javascript代码中保留一个“stepper”变量，它会跟踪你所使用的字体大小“step”。然后我会将步进器中存储的值插入到某个公式中，以得出最终的字体大小。要限制大小，您可以确保“步骤”高于或低于特定值。

这样的事情：

var factor = 0.75;
var step   = 0;

bigger.onclick = function() {
    step++;
    step = Math.min(step, 4) // Step can never go above 4
    reloadText();
}

smaller.onclick = function() {
    step--;
    step = Math.max(step, -4) // Step can never go below -4
    reloadText();
}

function reloadText() {
    // 14 is the default size, in points.
    // If step is equal to zero, there will be no change in size.
    // If step is below zero, the font will be smaller.
    // If step is above zero, the font will be larger.
    var size = 14 + (step*factor); 
    hello.style.fontSize= size+"pt";

    if (step >= 4) {
        // Disable "bigger" button
    } else {
        // Enable "bigger" button
    }

    if (step <= -4) {
        // Disable "smaller" button
    } else {
        // Enable "smaller" button
    }
}

Answer 2

您的按钮未被禁用，因为条件currentSize== "66.6667pt"永远不会成立。看起来你正在处理两次禁用状态，因为除了禁用按钮之外，如果大小小于60，你的函数会提前返回：

if(csz > 60) return;

因此，点击几次后，您的尺寸最终会变为65.33333333333333pt，这会阻止其在后续点击时变得更大，但它永远不会满足禁用按钮的条件。

您认为有两种不同的东西是最大允许尺寸：一个地方60个，另一个地方66.6667个。尝试定义一次并在两个地方使用它：

var maxSize=60;
bigger.onclick=function(){
   var currentSize=hello.style.fontSize;
   if(parseFloat(currentSize)> maxSize){bigger.disabled=true;}
   var csz = parseInt(currentSize.replace("24pt", ""));
   if(csz > maxSize) return;
   csz/=factor;
   hello.style.fontSize= csz+"pt";
}

这是一个working sample。尝试自己为minSize做同样的事情。您还可以尝试在再次缩小文本后重新启用该按钮。

Answer 3

我愿意：

if(parseInt(currentSize)> 66){bigger.disabled=true;}

如果至少我理解你的问题。

Answer 4

感谢您的回答@aapierce和@cody，跟着cody的回答，它有效，只是通过这种方式修改了if语句：

在greater.onclick（）中，如果文本达到最大尺寸，则禁用“更大”按钮，但启用“更小”按钮

 if(parseFloat(currentSize)> maxSize){bigger.disabled=true; smaller.disabled=false;}

small.onclick（）中的

是相反的：

if(parseFloat(currentSize)<= minSize){smaller.disabled=true; bigger.disabled=false;}

将尝试遵循aapierce的答案，以便在此主题上获得更多练习

当文本达到最小/最大大小时，使用JavaScript禁用HTML按钮

4 个答案: