html - How do you change the font-family of a input element and text with JavaScript? - Stack Overflow

admin管理员组

文章数量:1022989

I have a problem with JavaScript that i wrote to change the font in a <input type="text"> element and a <p> element.

function tnrchan() {
  document.getElementsByClassName("pedfields").style.fontFamily = "Times New Roman";
  document.getElementById("preview").style.fontFamily = "Times New Roman";
}

function bschan() {
  document.getElementsByClassName("pedfields").style.fontFamily = "Brush Script MT";
  document.getElementById("preview").style.fontFamily = "Brush Script MT";
}

<fieldset>
  <legend>Pick Your Font</legend>
  <table>
    <tr>
      <th id="tms">Times New Roman</th>
      <th><input type="radio" id="tmsr" name="font" onclick="tnrchan()" checked="checked"></th>
    </tr>
    <tr>
      <th id="bs">Brush Script</th>
      <th><input type="radio" id="bsr" onclick="bschan()" name="font"></th>
      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;More Fonts Coming Soon!</th>
    </tr>
    <tr>
      <th id="al">Arial</th>
      <th><input type="radio" id="alr" name="font"></th>
    </tr>
    <th id="fs">French Script MT</th>
    <th><input type="radio" id="fsr" name="font"></th>
  </table>
</fieldset>
<fieldset>
  <legend>Preview</legend>
  <p id="preview">This Is What Your Words Will Look Like!</p>
  <br>
  <label>Try It Out!<br><input type="text" class="pedfields"placeholder="EXAMPLE..."></label>
</fieldset>

I have a problem with JavaScript that i wrote to change the font in a <input type="text"> element and a <p> element.

function tnrchan() {
  document.getElementsByClassName("pedfields").style.fontFamily = "Times New Roman";
  document.getElementById("preview").style.fontFamily = "Times New Roman";
}

function bschan() {
  document.getElementsByClassName("pedfields").style.fontFamily = "Brush Script MT";
  document.getElementById("preview").style.fontFamily = "Brush Script MT";
}

<fieldset>
  <legend>Pick Your Font</legend>
  <table>
    <tr>
      <th id="tms">Times New Roman</th>
      <th><input type="radio" id="tmsr" name="font" onclick="tnrchan()" checked="checked"></th>
    </tr>
    <tr>
      <th id="bs">Brush Script</th>
      <th><input type="radio" id="bsr" onclick="bschan()" name="font"></th>
      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;More Fonts Coming Soon!</th>
    </tr>
    <tr>
      <th id="al">Arial</th>
      <th><input type="radio" id="alr" name="font"></th>
    </tr>
    <th id="fs">French Script MT</th>
    <th><input type="radio" id="fsr" name="font"></th>
  </table>
</fieldset>
<fieldset>
  <legend>Preview</legend>
  <p id="preview">This Is What Your Words Will Look Like!</p>
  <br>
  <label>Try It Out!<br><input type="text" class="pedfields"placeholder="EXAMPLE..."></label>
</fieldset>

I want the font-family of the <input> and <p> to change to one of the fonts when the functions are called.

Anyone have an idea on what I am doing wrong?

EDIT I got it working. It needed the following code:

function changeFont(fontName) {

  var list = document.getElementsByClassName("preview");

  for (i = 0; i < list.length; ++i) {
    list[i].style.fontFamily = fontName;
  }
}

<fieldset>
  <legend>Pick Your Font</legend>
  <table>
    <tr>
      <th id="tms">Times New Roman</th>
      <th><input type="radio" id="tmsr" name="font" onclick="changeFont('Times New Roman')" checked="checked"></th>
    </tr>
    <tr>
      <th id="bs">Brush Script</th>
      <th><input type="radio" id="bsr" onclick="changeFont('Brush Script MT')" name="font"></th>
      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;More Fonts Coming Soon!</th>
    </tr>
    <tr>
      <th id="al">Arial</th>
      <th><input type="radio" id="alr" onclick="changeFont('Arial')" name="font"></th>
    </tr>
    <th id="fs">French Script MT</th>
    <th><input type="radio" id="fsr" onclick="changeFont('French Script MT')" name="font"></th>
  </table>
</fieldset>
<fieldset>
  <legend>Preview</legend>
  <p id="preview" class="preview">This Is What Your Words Will Look Like!</p>
  <br>
  <label>Try It Out!<br><input type="text" class="preview" placeholder="EXAMPLE..."></label>
</fieldset>

• javascript
• html
• css
• fonts

Share Improve this question Follow edited Jun 20, 2018 at 2:07 Jacob G asked Mar 17, 2014 at 17:02 Jacob GJacob G 14.2k44 gold badges5050 silver badges6767 bronze badges 6

• You're using "font-family" instead of "fontFamily". Dashes are not allowed in identifiers in JavaScript, so the property names exposed by style objects are camel-case. – Pointy Commented Mar 17, 2014 at 17:04
• What @Pointy said, or you could just add a class instead of changing the style attributes. – Chad Commented Mar 17, 2014 at 17:05
• I still can not get it to work. I used this: function bschan() {document.getElementByClassName("pedfields").style.fontFamily="Brush Script MT"; document.getElementById("preview").style.fontFamily="Brush Script MT";} Do you have any ideas? – Jacob G Commented Mar 17, 2014 at 17:13
• 1 its getElementsByClassName with an 's' in getElements..... – lshettyl Commented Mar 17, 2014 at 17:14
• And it's getElementById with no 's' in getElement – lshettyl Commented Mar 17, 2014 at 17:24

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

document.getElementByClassName("pedfields")

It says elements, with an s, plural.

That returns a NodeList, not an Element. You have to loop over it like an array.

.style.font-family

Identifiers cannot contain - characters. They are subtraction operators. You need to switch to camelCase: fontFamily.

Typically, any hyphenated property in CSS is going to be a camelCased property in JavaScript. Thus, you would use style.fontFamily.

However, I would remend switching/applying the class of the element and letting the CSS control the details.

I have a problem with JavaScript that i wrote to change the font in a <input type="text"> element and a <p> element.

function tnrchan() {
  document.getElementsByClassName("pedfields").style.fontFamily = "Times New Roman";
  document.getElementById("preview").style.fontFamily = "Times New Roman";
}

function bschan() {
  document.getElementsByClassName("pedfields").style.fontFamily = "Brush Script MT";
  document.getElementById("preview").style.fontFamily = "Brush Script MT";
}

<fieldset>
  <legend>Pick Your Font</legend>
  <table>
    <tr>
      <th id="tms">Times New Roman</th>
      <th><input type="radio" id="tmsr" name="font" onclick="tnrchan()" checked="checked"></th>
    </tr>
    <tr>
      <th id="bs">Brush Script</th>
      <th><input type="radio" id="bsr" onclick="bschan()" name="font"></th>
      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;More Fonts Coming Soon!</th>
    </tr>
    <tr>
      <th id="al">Arial</th>
      <th><input type="radio" id="alr" name="font"></th>
    </tr>
    <th id="fs">French Script MT</th>
    <th><input type="radio" id="fsr" name="font"></th>
  </table>
</fieldset>
<fieldset>
  <legend>Preview</legend>
  <p id="preview">This Is What Your Words Will Look Like!</p>
  <br>
  <label>Try It Out!<br><input type="text" class="pedfields"placeholder="EXAMPLE..."></label>
</fieldset>

I have a problem with JavaScript that i wrote to change the font in a <input type="text"> element and a <p> element.

function tnrchan() {
  document.getElementsByClassName("pedfields").style.fontFamily = "Times New Roman";
  document.getElementById("preview").style.fontFamily = "Times New Roman";
}

function bschan() {
  document.getElementsByClassName("pedfields").style.fontFamily = "Brush Script MT";
  document.getElementById("preview").style.fontFamily = "Brush Script MT";
}

<fieldset>
  <legend>Pick Your Font</legend>
  <table>
    <tr>
      <th id="tms">Times New Roman</th>
      <th><input type="radio" id="tmsr" name="font" onclick="tnrchan()" checked="checked"></th>
    </tr>
    <tr>
      <th id="bs">Brush Script</th>
      <th><input type="radio" id="bsr" onclick="bschan()" name="font"></th>
      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;More Fonts Coming Soon!</th>
    </tr>
    <tr>
      <th id="al">Arial</th>
      <th><input type="radio" id="alr" name="font"></th>
    </tr>
    <th id="fs">French Script MT</th>
    <th><input type="radio" id="fsr" name="font"></th>
  </table>
</fieldset>
<fieldset>
  <legend>Preview</legend>
  <p id="preview">This Is What Your Words Will Look Like!</p>
  <br>
  <label>Try It Out!<br><input type="text" class="pedfields"placeholder="EXAMPLE..."></label>
</fieldset>

I want the font-family of the <input> and <p> to change to one of the fonts when the functions are called.

Anyone have an idea on what I am doing wrong?

EDIT I got it working. It needed the following code:

function changeFont(fontName) {

  var list = document.getElementsByClassName("preview");

  for (i = 0; i < list.length; ++i) {
    list[i].style.fontFamily = fontName;
  }
}

<fieldset>
  <legend>Pick Your Font</legend>
  <table>
    <tr>
      <th id="tms">Times New Roman</th>
      <th><input type="radio" id="tmsr" name="font" onclick="changeFont('Times New Roman')" checked="checked"></th>
    </tr>
    <tr>
      <th id="bs">Brush Script</th>
      <th><input type="radio" id="bsr" onclick="changeFont('Brush Script MT')" name="font"></th>
      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;More Fonts Coming Soon!</th>
    </tr>
    <tr>
      <th id="al">Arial</th>
      <th><input type="radio" id="alr" onclick="changeFont('Arial')" name="font"></th>
    </tr>
    <th id="fs">French Script MT</th>
    <th><input type="radio" id="fsr" onclick="changeFont('French Script MT')" name="font"></th>
  </table>
</fieldset>
<fieldset>
  <legend>Preview</legend>
  <p id="preview" class="preview">This Is What Your Words Will Look Like!</p>
  <br>
  <label>Try It Out!<br><input type="text" class="preview" placeholder="EXAMPLE..."></label>
</fieldset>

• javascript
• html
• css
• fonts

Share Improve this question Follow edited Jun 20, 2018 at 2:07 Jacob G asked Mar 17, 2014 at 17:02 Jacob GJacob G 14.2k44 gold badges5050 silver badges6767 bronze badges 6

• You're using "font-family" instead of "fontFamily". Dashes are not allowed in identifiers in JavaScript, so the property names exposed by style objects are camel-case. – Pointy Commented Mar 17, 2014 at 17:04
• What @Pointy said, or you could just add a class instead of changing the style attributes. – Chad Commented Mar 17, 2014 at 17:05
• I still can not get it to work. I used this: function bschan() {document.getElementByClassName("pedfields").style.fontFamily="Brush Script MT"; document.getElementById("preview").style.fontFamily="Brush Script MT";} Do you have any ideas? – Jacob G Commented Mar 17, 2014 at 17:13
• 1 its getElementsByClassName with an 's' in getElements..... – lshettyl Commented Mar 17, 2014 at 17:14
• And it's getElementById with no 's' in getElement – lshettyl Commented Mar 17, 2014 at 17:24

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

document.getElementByClassName("pedfields")

It says elements, with an s, plural.

That returns a NodeList, not an Element. You have to loop over it like an array.

.style.font-family

Identifiers cannot contain - characters. They are subtraction operators. You need to switch to camelCase: fontFamily.

Typically, any hyphenated property in CSS is going to be a camelCased property in JavaScript. Thus, you would use style.fontFamily.

However, I would remend switching/applying the class of the element and letting the CSS control the details.

本文标签： htmlHow do you change the fontfamily of a input element and text with JavaScriptStack Overflow