How To Change Font Inside A Javascript Code

June 09, 2023 Post a Comment

I am a newbie in programming. I have here my javascript code. Its working fine but I want a different style. this code is a random quote generator. <

Solution 1:

Looking at this:

<buttonstyle="background-color:blue;width:200;height:70"onclick=>Share</button>

You have no function set to onclick. Do something like:

<buttonstyle="background-color:blue;width:200;height:70"onclick="changeFont(this, 'font name');">Share</button>

changeFont:

functionchangeFont(element, name) {
    element.style.fontFamily = name;
}

Solution 2:

Some things to improve:

Don't use document.write, but instead reserve an element in your HTML that you will populate with the quote, assigning to textContent;
Don't use round in your random generating expression, but floor, otherwise you risk to produce a value that is out of range
Don't use a separate variable for the number of quotes you have (which currently does not match the actual number), but use theQuote.length
Don't define long style values in your HTML, but use CSS classes instead
Don't reload the page at every click, but change the quote within the current page without navigating.

To dynamically set the font, you could reserve a few CSS classes to choose from, even randomly.

Here is how it could work:

functiondisplayQuote() {
    var theQuote= [
        "Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker",
        "If you're not part of the solution, you're part of the problem. - African Proverb",
        "When you confront a problem you begin to solve it. - Rudy Giuliani",
        "I dream of painting and then I paint my dream. - Vincent Van Gogh",
        "Be silent or let thy words be worth more than silence. - Pythagoras",
        "The past cannot be changed. The future is yet in your power. - Mary Pickford",
        "Anything's possible if you've got enough nerve. - J.K. Rowling"
    ];

    var quoteNum = Math.floor(Math.random() * theQuote.length);
    var clsName = "special" + Math.floor(Math.random() * 3); // choose random font style

    quote.textContent = theQuote[quoteNum];
    quote.className = clsName;
}
next.onclick = displayQuote; // execute on clickdisplayQuote(); // execute on page load

.shareButton {
    background-color:blue;
    width:200;
    height:70
}
.inspireButton {
    background-color:lightgreen;
    width:230;
    height:70;
    border: none; 
    font: bold 25px GreatVibes;
}
.special0 {
    font-family: Georgia;
    font-size: 24px;
    color: #444;
}
.special1 {
    font-family: Calibri;
    font-size: 32px;
    color: #844;
}
.special2 {
    font-family: Tahoma;
    font-size: 28px;
    color: #484;
}

<divid="quote"></div><div><buttonid="next"class="inspireButton">Inspire Me More!</button></div>

Solution 3:

As you are new, it's best not to pick up bad habits which, unfortunately is easy to do because so much of the code out there is just copied and pasted by folks who don't know any better, so:

Try not to write inline styles or inline event handlers like this:

<buttonstyle="background-color:lightgreen;width:230;height:70;border: none; font: bold 25px GreatVibes;"onclick="history.go(0)">Inspire Me More!</button>

As you can see, it makes the code difficult to read as there are 3 languages in that one element!

Baca Juga

Instead, separate your languages into their own sections, or even files.

With regard to CSS styles, it would be better to define CSS classes ahead of time and then just switch to the class you need, rather than write all that inline CSS.

You also have some errors in your code.

So, here's an updated version of your code that also changes the font. Make sure to review the comments for details.

<html><head><title>Daily Quotes</title><style>/* We'll separate the CSS into this section and prepare pre-made classes for styles.
       See how much cleaner this is, not only here but in the HTML as well? */button {
      background-color:lightgreen;
      width:230;height:70;
      border: none;
      font: bold 25px GreatVibes;
    }
    
    .share {
      background-color:blue;
      width:200px;  /* Don't forget to add the unit */height:70px;  /* Don't forget to add the unit */
    }
    
    #output {
      /*  Now, just the output area has its own style! */font-family: fantasy;
    }
  </style></head><body><!-- All your content must be between the opening and closing body tags. --><h1>Inspirational Quotes</h1><div><button>Inspire Me More!</button></div><div><buttonclass="share">Share</button><imgsrc="images/bg.jpg"id="bg"alt=""></div><!-- Don't use document.write() to inject content into a page. Instead, prepare an 
       element ahead of time that you will update later. --><divid="output"></div><!-- Place your script tags just before the closing of the body tag. That way, you can be
       sure that any HTML element you reference in the script has already been read into memory. --><script>// First, get references to the HTML elements you'll want to work with:var btn = document.querySelector("button");
    var out = document.getElementById("output");
    
    // Then, set up your event handlers in JavaScript, not in HTML
    btn.addEventListener("click", getQuote);
   
    functiongetQuote(){
     
      // Here's a simpler way to set up an array:var theQuotes= [
        'Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker',
        'If you\'re not part of the solution, you\'re part of the problem. - African Proverb',
        'When you confront a problem you begin to solve it. - Rudy Giuliani',
        'Dream of painting and then I paint my dream. - Vincent Van Gogh',
        'Be silent or let thy words be worth more than silence. - Pythagoras',
        'The past cannot be changed. The future is yet in your power. - Mary Pickford',
        'Anything\'s possible if you\'ve got enough nerve. - J.K. Rowling'
      ];

      // You only want your radom number to be from 0 to the amount of the quotes array -1var quoteNum = Math.floor(Math.random() * theQuotes.length);
      
      // Now, just update the prexisting element:
      output.textContent = theQuotes[quoteNum];
    }
</script></body></html>

Solution 4:

in short, here is working example:

<bodyonload="generateRandomQuote()"><h1>Inspirational Quotes</h1><divid="quote-holder"style="font-family: sans-serif; color: red;"></div><div><buttonstyle="background-color: lightgreen; width:230px; height:70px; border: none; font: bold 25px GreatVibes;"onclick="generateRandomQuote()">Inspire Me More!</button></div><buttonstyle="background-color: blue; width: 200px; height: 70px"onclick="">Share</button><imgsrc="images/bg.jpg"id="bg"alt=""><script>var quoteHolder = document.getElementById('quote-holder');
        var theQuote = [
          'Whenever you see a successful business, someone once made a courageous decision. - Peter Drucker',
          'If you\'re not part of the solution, you\'re part of the problem. - African Proverb',
          'When you confront a problem you begin to solve it. - Rudy Giuliani',
          'I dream of painting and then I paint my dream. - Vincent Van Gogh',
          'Be silent or let thy words be worth more than silence. - Pythagoras',
          'The past cannot be changed. The future is yet in your power. - Mary Pickford',
          'Anything\'s possible if you\'ve got enough nerve. - J.K. Rowling'
        ];

        functiongenerateRandomQuote() {
          var quoteIndex = Math.floor((Math.random() * theQuote.length)); 
          quoteHolder.innerHTML = theQuote[ quoteIndex ];
        }



    </script></body>

in css you should define units, you had just numbers,
there shouldn't bee any h1 or images or any elements outside your body tag,
it's better to just append your desired content to some div, rather than refreshing the whole page,
...

I see that you already have answer.

JavaScript Gen

How To Change Font Inside A Javascript Code

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "How To Change Font Inside A Javascript Code"