www.webdeveloper.com
Results 1 to 14 of 14

Thread: JS script (vanilla) not working correctly due to autorefresh issue

  1. #1
    Join Date
    Aug 2014
    Posts
    12

    Question JS script (vanilla) not working correctly due to autorefresh issue

    I've created a site in which part of the functionality includes allowing the user to choose which font they wish to use. Essentially, by giving the user the ability to choose any font, the user is able to test the appearance of different characters to see if that font will work for them in any projects they are working on. In the beginning of my project, I used a script that allowed users to choose a font from a pre-made dropdown list. It worked great, except for the fact that it would be insane to try and list every font ever created. Later, I found a script that allows for user input into a form field to change the appearance of a webpage. I combined the two and created this script,

    PHP Code:
    function changeFont(userInput) {
    var 
    userInput document.getElementById("userInput").value;
    document.getElementsByTagName("body")[0].style.fontFamily userInput;

    which allows this form,

    PHP Code:
    <form><input type="text" id="userInput" placeholder=" Enter a font name" />
    <
    button onclick="changeFont();">Test</button></form
    to let the user change the page's font.

    This script works beautifully, except for an autorefresh that occurs about a second after the font change. The autorefresh clears the chosen font and returns the page to the default font. This makes it nearly impossible for the user to test how the font will render specific characters, as it does not allow enough time for the user to find the character again.

    Is there anything I can add to this script or to the onclick portion of the button element to disable the autorefresh? I don't want to disable refresh entirely, as the user may want to clear what they've done so far and start over, but I don't want the refresh to happened automatically and instantly. I want the user to have full control of when the page refreshes.

    I already tried whitelisting the page on AdBlock and Adblock Plus as well as testing the page with ALL extentions disabled temporarily on Chrome, IE, FF, Safari, Opera, and the developer versions of each browser to see if some external script was causing the issue. YesScript and NoScript solutions are not valid for this issue, as I don't want to place the requirements to fix this on the individual user and I DO want the font changing script to work.

  2. #2
    Join Date
    Oct 2013
    Posts
    609
    Remove the <form> and </form> tags from the HTML and it works.

  3. #3
    Join Date
    Oct 2013
    Posts
    609
    Just had a "well, duh" moment.

    Leave the <form> tags, but change:
    Code:
    <button onclick="changeFont();">Test</button>
    To:
    Code:
    <input type="button" onclick="changeFont();" value="Test" />
    And just for fun :
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>change font</title>
    <script>
    function changeFont(font,edit) {
    	edit.style.fontFamily = font;
    }
    </script>
    </head>
    <body>
    
    <p id="edit" contenteditable>Click in this paragraph. Edit and enter any text you want. Then either select or enter a font below and click the <b>Test</b> button. Enjoy!</p>
    
    <form>
    <p>
    <label for="sans">Sans-Serif fonts:</label><br>
    <select id="sans" onchange="changeFont(this.value,edit)">
    	<option value="">Choose</option>
    	<option value="Arial">Arial</option>
    	<option value="Verdana">Verdana</option>
    	<option Value="Helvetica">Helvetica</option>
    </select>
    </p>
    
    <p>
    <label for="serif">Serif fonts:</label><br>
    <select id="serif" onchange="changeFont(this.value,edit)">
    	<option value="">Choose</option>
    	<option value="times">Times (New Roman)</option>
    	<option value="Cambria">Cambria</option>
    </select>
    </p>
    
    <p>
    <label for="mono">Mono-spaced fonts:</label><br>
    <select id="mono" onchange="changeFont(this.value,edit)">
    	<option value="">Choose</option>
    	<option value="Courier">Courier</option>
    	<option value="Consolas">Consolas</option>
    </select>
    </p>
    
    <p>
    <label for="userInput">Or enter a different font below:</label><br>
    <input type="text" id="userInput" placeholder=" Enter a font name"> 
    <input type="button" onclick="changeFont(userInput.value,edit)" value="Test">
    </p>
    </form>
    
    </body>
    </html>
    Last edited by Kevin2; 08-24-2014 at 12:20 PM.

  4. #4
    Join Date
    Aug 2014
    Posts
    12
    Well, none of these 3 fixed the autorefresh issue.

    1) Removing the form tags - This broke the font changing function and invalidated the HTML.
    2) Changing the new button element to the old input element - This still functioned the same as what I posted at the top, but uses old likely-to-be-depreciated-in-the-future HTML.
    3) Dropdown menu - This is what I originally used, but wasn't quite what I needed, as I want to support all fonts and not just a select few system default fonts. This method also broke the entire design flow of the page, doesn't work right in older versions of IE, forces the UI to be far bigger than it should be, and creates a very dated look for a webpage with an otherwise modern style.

    I do appreciate the answers, but instead of solving the autorefresh issue, they just created new issues to go along with the issue I already have.

    To clarify, I'm NOT looking to see how many different ways there are to change fonts; I'm looking for a way to disable autorefresh. I don't mind if the page refreshes, so long as the user chose to refresh the page. The issue is that the autorefresh forces an instant refresh on the user even when the user does not want to clear his or her choice of font.

  5. #5
    Join Date
    Oct 2013
    Posts
    609
    Uhmmm. None of the ways I show above auto-refresh the page. In Chrome and IE11 anyway. Can't vouch for IE9-. If your "real page" is auto-refreshing you have something else going on scripting-wise or form-wise.

    Here's another way, guaranteed to not auto-refresh:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>change font</title>
    <script>
    function changeFont(font,edit) {
    	edit.style.fontFamily = font;
    }
    </script>
    </head>
    <body>
    
    <p id="edit" contenteditable>Click in this paragraph. Edit and enter any text you want. Then either select or enter a font below and click the <b>Test</b> button. Enjoy!</p>
    
    <form>
    <p>
    <label for="exampleFonts">Example fonts:</label><br>
    <select id="exampleFonts" onchange="changeFont(this.value,edit)">
    	<option value="">Choose</option>
        <optgroup label="Sans-serif">
    	<option value="Arial">Arial</option>
    	<option value="Verdana">Verdana</option>
    	<option Value="Helvetica">Helvetica</option>
        </optgroup>
        <optgroup label="Serif">
    	<option value="times">Times (New Roman)</option>
    	<option value="Cambria">Cambria</option>
        </optgroup>
        <optgroup label="Mono-space">
    	<option value="Courier">Courier</option>
    	<option value="Consolas">Consolas</option>
        </optgroup>
    </select>
    </p>
    
    <p>
    <label for="userInput">Or enter a different font below:</label><br>
    <input type="text" id="userInput" placeholder=" Enter a font name"> 
    <input type="button" onclick="changeFont(userInput.value,edit)" value="Test">
    </p>
    </form>
    </body>
    </html>
    Copy/paste/save/open/choose font/no-refresh. Seriously. No joke.

  6. #6
    Join Date
    Aug 2014
    Posts
    12
    Again, using a dropdown list of fonts would leave me only allowing a few system fonts for testing or requiring me to create the world's longest dropdown list to support every font in existence. The dropdown list is simply not a viable option. Granted, it doesn't autorefresh, but considering the sheer number of font options I'd have to list, it's entirely plausible that the page will timeout and never load at all. It would be a perfect solution if it weren't for the fact that I need to support all possible fonts for the page to serve its intended purpose.

    http://unibean.desolosubhumus.com/

    Perhaps seeing the webpage might help put it in perspective, so long as you keep in mind this is meant for designers and developers alike and that designers have a tendency to use many fonts throughout their career and certainly do not limit themselves to only the fonts that came with their OS, hence the reason @font-face exists. Honestly, I don't see why the script I'm currently using forces a refresh, but it does, at least on all the current browsers (past and present versions) and developer browsers (near-future versions) I've tested. If it doesn't autorefresh for you then maybe it's somethi9ng I've missed in my browser settings or another completely unrelated script that's firing off for no reason. While that would be bad for me as far as my own library of scripts or my settings are concerned, at least I'd know that my users would not have any problems with this in the meantime.

  7. #7
    Join Date
    Aug 2014
    Posts
    12
    FYI, I ditched the dropdown version when it had gotten to the point of beyond ridiculous. At this point, there were still another 50 fonts requested that I had not yet added.

    PHP Code:
    <div class="select">
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>A</option>
    <
    option value="Acorn Initials" selected="selected">Acorn Initials</option>
    <
    option value="Adine Kirnberg">Adine Kirnberg</option>
    <
    option value="Adine Kirnberg Alternate">Adine Kirnberg Alternate</option>
    <
    option value="Albert Text">Albert Text</option>
    <
    option value="Ancient Geek">Ancient Geek</option>
    <
    option value="AnnStone">AnnStone</option>
    <
    option value="Applesauce">Applesauce</option>
    <
    option value="Applesauce01">Applesauce01</option>
    <
    option value="Applesauce02">Applesauce02</option>
    <
    option value="Applesauce03">Applesauce03</option>
    <
    option value="Applesauce04">Applesauce04</option>
    <
    option value="Applesauce05">Applesauce05</option>
    <
    option value="Applesauce06">Applesauce06</option>
    <
    option value="Applesauce07">Applesauce07</option>
    <
    option value="Applesauce08">Applesauce08</option>
    <
    option value="Applesauce09">Applesauce09</option>
    <
    option value="Applesauce10">Applesauce10</option>
    <
    option value="Applesauce11">Applesauce11</option>
    <
    option value="Aquiline">Aquiline</option>
    <
    option value="AquilineTwo">AquilineTwo</option>
    <
    option value="ArabDances">ArabDances</option>
    <
    option value="Arcanum">Arcanum</option>
    <
    option value="Ardenwood Demo">Ardenwood Demo</option>
    <
    option value="Argos George Contour">Argos George Contour</option>
    <
    option value="Argos George">Argos George</option>
    <
    option value="Arial">Arial</option>
    <
    option value="Arrr Matey BB">Arrr Matey BB</option>
    <
    option value="Asrafel">Asrafel</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>B</option>
    <
    option value="Barock Initialen">Barock Initialen</option>
    <
    option value="Blackletter">Blackletter Bold</option>
    <
    option value="Blackletter Shadow">Blackletter Shadow</option>
    <
    option value="Blackwood Castle">Blackwood Castle</option>
    <
    option value="Blackwood Castle Shadow">Blackwood Castle Shadow</option>
    <
    option value="Bleeding Cowboys">Bleeding Cowboys</option>
    <
    option value="Bretagne Gaelic">Bretagne Gaelic</option>
    <
    option value="Broadcast Titling">Broadcast Titling</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>C</option>
    <
    option value="Calibri">Calibri</option>
    <
    option value="Calligula">Calligula</option>
    <
    option value="Callistroke">Callistroke</option>
    <
    option value="Cambria">Cambria</option>
    <
    option value="Cambria Math">Cambria Math</option>
    <
    option value="Candara">Candara</option>
    <
    option value="Canterbury">Canterbury</option>
    <
    option value="Cardinal">Cardinal</option>
    <
    option value="Cardinal Alternate">Cardinal Alternate</option>
    <
    option value="Celtic Hand">Celtic Hand</option>
    <
    option value="Comic Sans MS">Comic Sans</option>
    <
    option value="Consolas">Consolas</option>
    <
    option value="Constantia">Constantia</option>
    <
    option value="Corbel">Corbel</option>
    <
    option value="Courier New">Courier New</option>
    <
    option value="Courier">Courier</option>
    <
    option value="Cruickshank">Cruickshank</option>
    <
    option value="Cup and Talon">Cup and Talon</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>D</option>
    <
    option value="Dali">Dali</option>
    <
    option value="Dancing in the Minefields">Dancing in the Minefields</option>
    <
    option value="dearJoe">dearJoe</option>
    <
    option value="Decorated Roman Initials">Decorated Roman Initials</option>
    <
    option value="DeepWoodsInitials">DeepWoodsInitials</option>
    <
    option value="Dobkin Script">Dobkin Script</option>
    <
    option value="Dragon Harbour">Dragon Harbour</option>
    <
    option value="DreadLox">DreadLox</option>
    <
    option value="DreamerOne">DreamerOne</option>
    <
    option value="Dyspepsia">Dyspepsia</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>E</option>
    <
    option value="Earth Kid">Earth Kid</option>
    <
    option value="Ehmcke-Schwabacher Initialen">Ehmcke-Schwabacher Initialen</option>
    <
    option value="Eileen Caps Black">Eileen Caps Black</option>
    <
    option value="Eileen Caps">Eileen Caps</option>
    <
    option value="Elegant">Elegant</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>F</option>
    <
    option value="Faustus">Faustus</option>
    <
    option value="Fixedsys">Fixedsys</option>
    <
    option value="Franklin Gothic">Franklin Gothic</option>
    <
    option value="Futhark AOE">Futhark AOE</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>G</option>
    <
    option value="Gabriola">Gabriola</option>
    <
    option value="Georgia">Georgia</option>
    <
    option value="Grand Stylus">Grand Stylus</option>
    <
    option value="Ground Zero">Ground Zero</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>H</option>
    <
    option value="Halloween Spider">Halloween Spider</option>
    <
    option value="Harting Plain">Harting Plain</option>
    <
    option value="Hesperides Demo">Hesperides Demo</option>
    <
    option value="Holy Empire">Holy Empire</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>I</option>
    <
    option value="Impact">Impact</option>
    <
    option value="ImperatorPlaque">ImperatorPlaque</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>J</option>
    <
    option value="Jefferson">Jefferson</option>
    <
    option value="JFWildWood">JFWildWood</option>
    <
    option value="JI Belfry">JI Belfry</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>K</option>
    <
    option value="Kashmir">Kashmir</option>
    <
    option value="Knights Templar">Knights Templar</option>
    <
    option value="Koch Rivoli">Koch Rivoli</option>
    <
    option value="Konanur Medium">Konanur Medium</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>L</option>
    <
    option value="Little Insect">Little Insect</option>
    <
    option value="LMS Egyptian Bookends">LMS Egyptian Bookends</option>
    <
    option value="Logger">Logger</option>
    <
    option value="Lucida Console">Lucida Console</option>
    <
    option value="Lucida Sans Unicode">Lucida Sans Unicode</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>M</option>
    <
    option value="Malagua Demo">Malagua Demo</option>
    <
    option value="Marcelle Script">Marcelle Script</option>
    <
    option value="Mary Jane Alternate">Mary Jane Alternate</option>
    <
    option value="Mary Jane Antique">Mary Jane Antique</option>
    <
    option value="Mary Jane Cavazos">Mary Jane Cavazos</option>
    <
    option value="Mary Jane deGroot">Mary Jane deGroot</option>
    <
    option value="Mary Jane Gilardino">Mary Jane Gilardino</option>
    <
    option value="Mary Jane Larabie">Mary Jane Larabie</option>
    <
    option value="Mary Jane Meade">Mary Jane Meade</option>
    <
    option value="Mary Jane Olyff">Mary Jane Olyff</option>
    <
    option value="Mary Jane Small Caps">Mary Jane Small Caps</option>
    <
    option value="Mary Jane Tankard">Mary Jane Tankard</option>
    <
    option value="Mary Jane Windlin">Mary Jane Windlin</option>
    <
    option value="Mechanical Rorschach">Mechanical Rorschach</option>
    <
    option value="Medusa">Medusa</option>
    <
    option value="MetropolisNF">MetropolisNF</option>
    <
    option value="Microsoft Sans Serif">Microsoft Sans Serif</option>
    <
    option value="Middle Saxony Text">Middle Saxony Text</option>
    <
    option value="MiddleSaxonyText">MiddleSaxonyText</option>
    <
    option value="Modern">Modern</option>
    <
    option value="Morpheus">Morpheus</option>
    <
    option value="MS Sans Serif">MS Sans Serif</option>
    <
    option value="MS Serif">MS Serif</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>N</option>
    <
    option value="Neugotische Initialen">Neugotische Initialen</option>
    <
    option value="Nyala">Nyala</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>O</option>
    <
    option value="Octavio">Octavio</option>
    <
    option value="Of Wildflowers and Wings">Of Wildflowers and Wings</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>P</option>
    <
    option value="Palatino Linotype">Palatino Linotype</option>
    <
    option value="Porcelain">Porcelain</option>
    <
    option value="Powell Antique">Powell Antique</option>
    <
    option value="Prescript">Prescript</option>
    <
    option value="Prescript Cn Bold Italic">Prescript Cn Bold Italic</option>
    <
    option value="Present-Normal">Present-Normal</option>
    <
    option value="Pumpkin">Pumpkin</option>
    <
    option value="puppetFace">puppetFace</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>Q</option>
    <
    option value="Quicksand">Quicksand-Light</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>R</option>
    <
    option value="Ragamuffin">Ragamuffin</option>
    <
    option value="Ravenscroft">Ravenscroft</option>
    <
    option value="Renaissance Scrolls">Renaissance Scrolls</option>
    <
    option value="Rocket Script">Rocket Script</option>
    <
    option value="Roman Antique">Roman Antique</option>
    <
    option value="Roman">Roman</option>
    <
    option value="Royal Initialen">Royal Initialen</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>S</option>
    <
    option value="San Remo">San Remo</option>
    <
    option value="Sans Plate Caps">Sans Plate Caps</option>
    <
    option value="Segoe Print">Segoe Print</option>
    <
    option value="Segoe Script">Segoe Script</option>
    <
    option value="Segoe UI">Segoe UI</option>
    <
    option value="Segoe UI Symbol">Segoe UI Symbol</option>
    <
    option value="Sketch Rockwell">Sketch Rockwell</option>
    <
    option value="Spinstee">Spinstee</option>
    <
    option value="SquareCaps">SquareCaps</option>
    <
    option value="Sulatko">Sulatko</option>
    <
    option value="Symbol">Symbol</option>
    </
    select>... 
    I know... right?

  8. #8
    Join Date
    Aug 2014
    Posts
    12
    PHP Code:
    ...<select name="fontchange" onchange="changeFont(this.value)">
    <
    option>T</option>
    <
    option value="Tahoma">Tahoma</option>
    <
    option value="Tanach">Tanach</option>
    <
    option value="TCLescuelerascript">TCLescuelerascript</option>
    <
    option value="Terminal">Terminal</option>
    <
    option value="Times New Roman">Times New Roman</option>
    <
    option value="Tolkien">Tolkien</option>
    <
    option value="Tone and Debs">Tone and Debs</option>
    <
    option value="Topiary_Initials">Topiary_Initials</option>
    <
    option value="TrajanusBricks">TrajanusBricks</option>
    <
    option value="TrajanusBricksXtra">TrajanusBricksXtra</option>
    <
    option value="TrajanusBriX-Invers">TrajanusBriX-Invers</option>
    <
    option value="Trebuchet MS">Trebuchet MS</option>
    <
    option value="Tribeca">Tribeca</option>
    <
    option value="Typographer Caps">Typographer Caps</option>
    <
    option value="TypographerWoodcutInitialsOne">TypographerWoodcutInitialsOne</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>U</option>
    <
    option value="Unicorn">Unicorn</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>V</option>
    <
    option value="Verdana">Verdana</option>
    <
    option value="Viking">Viking</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>W</option>
    <
    option value="Webdings">Webdings</option>
    <
    option value="Windswept MF">Windswept MF</option>
    <
    option value="Wingdings">Wingdings</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>X</option></select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>Y</option>
    <
    option value="Ysgarth">Ysgarth</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>Z</option>
    <
    option value="Zombified">Zombified</option>
    </
    select>
    <
    select name="fontchange" onchange="changeFont(this.value)">
    <
    option>+</option>
    <
    option>[Your Personal Default Settings]</option>
    <
    option value="fancy">fancy</option>
    <
    option value="monospace">monospace</option>
    <
    option value="sans-serif">sans-serif</option>
    <
    option value="serif">serif</option>
    </
    select>
    </
    div

  9. #9
    Join Date
    Oct 2013
    Posts
    609
    Quote Originally Posted by SheilaT View Post
    uses old likely-to-be-depreciated-in-the-future HTML.
    Interesting....

    Show me where <input type="button"> is " likely-to-be-depreciated-in-the-future HTML"

    Every bit of code I've posted for you validates as HTML5. How much more modern do you want? And by the way the word is deprecated, not depreciated.
    Depreciated: http://dictionary.reference.com/browse/depreciated
    Deprecated: http://dictionary.reference.com/browse/deprecated

    Just FYI, the code I posted above also works correctly in Firefox.

  10. #10
    Join Date
    Oct 2013
    Posts
    609
    Quote Originally Posted by SheilaT View Post
    Again, using a dropdown list of fonts would leave me only allowing a few system fonts for testing or requiring me to create the world's longest dropdown list to support every font in existence.
    Really and truly!!!! Do you not see what I did?!

    I used a drop-down to present a few example fonts but use the <input type="text"> to allow the user to enter ANY FONT THEY WANT.

  11. #11
    Join Date
    Aug 2014
    Posts
    12
    HTML5 includes the button element, as buttons are buttons, not checkboxes and the like. The W3C has been adding new elements and encouraging people to use them instead of the older elements used in previous versions of HTML.

    http://www.w3.org/TR/wai-aria/roles (Section 5.3.1 Abstract Roles)

    This is much the same as how header, main, article, section, footer, etc. are intended to replace div.header, div.main, div.article, div.section, div.footer, etc., leaving the humble div to be used in cases where the aforementioned new elements do not cover the intended use, semantically speaking.

    And yes, I used the wrong word. Typos happen.

  12. #12
    Join Date
    Aug 2014
    Posts
    12
    Quote Originally Posted by Kevin2 View Post
    ... but use the <input type="text"> to allow the user to enter ANY FONT THEY WANT.
    I saw that, but couldn't seem to get it working without the dropdown mucking up the UI.

    Perhaps I cut more than I should or not enough trying to get rid of the dropdown portion.

    If the input (or button, as it is meant to be a stand-alone widget) should work by itself, perhaps I could try using that part by itself, if you don't mind reposting sans the dropdown.

  13. #13
    Join Date
    Aug 2014
    Posts
    12
    I finally found the answer to the question I asked elsewhere, but knowing that someone else may have the same question and end up here someday, I'll go ahead and post it here for them. I just had to add a return false to the onclick attribute for the button element.

    Code:
    &#x0003C;button onclick="changeFont(); return false"&#x0003E;Test&#x0003C;/button&#x0003E;
    Otherwise, my script was fine. Adding return false lets the browser know that it should not follow the instructions for the written script with any default actions, which in this case, means the browser will run the font changing script, but not the default refresh action afterwards.

  14. #14
    Join Date
    Aug 2014
    Posts
    12
    Sorry about the code; it should have been

    Code:
    <button onclick="changeFont(); return false">Test</button>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles