CODEWITHSUNDEEP
javascriptcss
dragon_sa
dragon_sa

Reputation: 49

Dynamically change font in div tag

I have been fiddling with this simple script to dynamically show text as it is typed and then via a dropdown list change the font of that text, but I cant get the font change to work, any help as to why would be great.

$(document).ready(function() {
  $("#UpdateText").keyup(function() {
    // Getting the current value of textarea
    var currentText = $(this).val();

    // Setting the Div content
    $("#output").text(currentText);
  });
});

function myFont() {
  document.getElementById("#output").style.fontFamily = font.value;
}
#output {
  padding: 10px;
  width: 150px;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  left: 150px;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<textarea id="UpdateText" rows="1" cols="30" style="resize: none; text-align: center" placeholder="Type the name/word here..."></textarea><br />
<select id="input-font" onchange="myFont()">
  <option value="Times New Roman">Times New Roman</option>
  <option value="Arial">Arial</option>
  <option value="Verdana">Verdana</option>
  <option value="Impact">Impact</option>
</select>
<div id="output"></div>

Upvotes: 0

Views: 967

Answers (2)

Mamun
Mamun

Reputation: 68923

Two issues:

  1. You should pass the element to the function so that you can refer that inside the function.

  2. You have a typo by prefixing the # before the id attribute as getElementById() treats the passing string as id.

    document.getElementById("output").style.fontFamily = font.value;

Please Note: As you are having jQuery, I will suggest to use that if possible

$("#output").css('font-family', font.value);

Code Example:

<style>
    #output{
        padding: 10px;
        width: 150px;
        text-align: center;
        font-weight: bold;
        font-size: 24px;
        left: 150px;
        position: absolute;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("#UpdateText").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $("#output").text(currentText);
    });
});
</script>

<textarea id="UpdateText" rows="1" cols="30" style="resize: none; text-align: center" placeholder="Type the name/word here..."></textarea><br />
    <select id="input-font" onchange="myFont(this)">
        <option value="Times New Roman">Times New Roman</option>
        <option value="Arial">Arial</option>
        <option value="Verdana">Verdana</option>
        <option value="Impact">Impact</option>
    </select>
<div id="output"></div>
<script>
function myFont(font) {
  $("#output").css('font-family', font.value);
}
</script>

Upvotes: 1

Syed Sadiq ali
Syed Sadiq ali

Reputation: 64

you can use jquery to get the current font select box value.

Please refer the below-working jsfiddle.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Font test</title>
<style>
    #output{
        padding: 10px;
        width: 150px;
        text-align: center;
        font-weight: bold;
        font-size: 24px;
        left: 150px;
        position: absolute;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("#UpdateText").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $("#output").text(currentText);
    });
});
</script>
</head>
<body>
<textarea id="UpdateText" rows="1" cols="30" style="resize: none; text-align: center" placeholder="Type the name/word here..."></textarea><br />
    <select id="input-font" onchange="myFont()">
        <option value="Times New Roman">Times New Roman</option>
        <option value="Arial">Arial</option>
        <option value="Verdana">Verdana</option>
        <option value="Impact">Impact</option>
    </select>
<div id="output"></div>
<script>
function myFont() {
  $('#output').css('font-family',$('#input-font').val());
}
</script>
</body>
</html>

Upvotes: 1

Related Questions