Question

Javascript：function makeStyle（x）{

          var x = document.getElementById("styleText");

          if(document.getElementById("xx-small").checked)
          {       
              x.style.fontSize = "xx-small";
          }
          else if(document.getElementById("medium").checked)
          {   
              x.style.fontSize = "medium";
          }
          else if(document.getElementById("xx-large").checked)
          {
              x.style.fontSize = "xx-large";
          }

      }
      document.getElementById('styleText').addEventListener('change', makeStyle);

HTML：

6.按所选单选按钮中的指示设置文本数据的样式。

<label>xx-small</label><input type="radio" id="xx-small" name="rb" value="xx-small"  /><br/>
<label>medium</label><input type="radio" id="medium" name="rb" value="medium" /><br/>
<label>xx-large</label><input type="radio" id="xx-large" name="rb" value="xx-large" /><br/>   
<input type="text" id="styleText" value = "Random Text " />

我的问题是......我似乎无法通过更改文本框中的fontsize来使radiobutton正常工作。那么，我怎么能解决这个问题呢？

我确定我做错了但我似乎无法看到我所犯的错误。

Answer 1

您已设置#styleText的监听器，该监听器似乎不是一个单选按钮。你应该将相同的监听器附加到所有3个单选按钮ID。此外，在处理程序内部，无论更改内容如何var x = document.getElementById("styleText");

，您都在读取同一元素的值

Answer 2

您应该删除<input type="text" id="styleText" value = "Random Text " />的事件侦听器，并在javascript代码中为单选按钮添加三个事件侦听器：

Javascript：// 在window.onload事件中添加以下代码

window.onload=function()
  {
    document.getElementById('xx-small').addEventListener('change', makeStyle);
    document.getElementById('xx-large').addEventListener('change', makeStyle);
    document.getElementById('medium').addEventListener('change', makeStyle);
  };

这是JS Fiddle Demo。

通过单选按钮设置文本框的字体大小

2 个答案: