Basically, my site allows users to change the products’ color by clicking on the color swatch button. My issue is that the javascript for my site is not working out of the sudden. I search online for some solutions by clearing cookies, cache, refreshing the site and restarting the computer and it still didn’t work. I didn’t tamper with the codes either and i have no idea how to fix it. Is there any other way perharps to fix this problem?
Console says:
Uncaught ReferenceError: change12 is not defined
at HTMLButtonElement.onclick (fiddle.jshell.net/:129)
The reason why that happens is that the javascript code is hidden inside of an onload function.
To fix: open the JavaScript settings (at top-right of javascript code section) and change the Load Type to nowrap - body.
1 Like
https://jsfiddle.net/ewf4u67t/5/ i changed the load type to nowrap-body but it still isn’t working for some reason
I’m using Google Chrome. I’ll try it in Internet Explorer too. Yes, it also works there too.
I doubt if the spaces are helping any.
onclick= "change11()"
but it works for me in Vivaldi
Thanks for the information but could you please test out mozilla firefox because im using firefox for this
Thanks for the reply but unfortunately, it isn’t working in mozilla firefox for me. Someone told me it’s working in chrome and internet explorer so i tried and it worked but just not firefox. Im at my wits end because i have to use firefox for this
I just tried using Firefox 50.1.0 for Ubuntu.
I got a “getAttributeNode is deprecated use getAttribute” warning (which unless I missed it is jsfiddle not your code).
But it worked for me same as the gif I posted. .
Thanks, it’s working now in firefox now, however, when i paste the code to my texteditor, it still gives me the same problem after i run the webpage. Im not sure if it’s due to an error on how i linked the javascript file to my html file or some other problems.
But these are my html codes. Am i linking the js file correctly?
<head>
<title>BeautyStyle</title>
<div class="background"><img src="https://s5.postimg.org/5xnbpthdj/transparentlogo.png" alt="Beauty Style" style="width:300px;height:300px;margin-left:500px; margin-top:0px;"></div>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="java.js"></script>
</head>
<body>
<div id ="face"><img class="center" src="https://s5.postimg.org/nkv2hbr5j/lightnatural.png" id="foundation" alt="Conceal + Perfect 2-in-1 Foundation + Concealer" height="398" width="350">
<div class ="button">
<button class="buttondeco" style="text-align:center; background-color: #f5cfb8;" onclick= "change11()">1</button>
<button class="buttondeco" style="text-align:center; background-color: #d1a580;" onclick= "change12()">2</button>
<button class="buttondeco" style="text-align:center; background-color: #d48f56;" onclick= "change13()">3</button></div>
<p class="headertext">MILANI</p>
<p class="title">Conceal + Perfect 2-in-1 Foundation + Concealer</p>
<p class="descriptiontext">Price: $10</p><br>
<div id ="face"><img class="center" src="https://s5.postimg.org/irbbcgunr/warm_porcelain.png" id="foundation1" alt="Stick Foundation" height="350" width="350">
<div class ="button">
<button class="buttondeco" style="text-align:center; background-color: #e1c49c;" onclick= "change14()">1</button>
<button class="buttondeco" style="text-align:center; background-color: #d19f6c" onclick= "change15()">2</button>
<button class="buttondeco" style="text-align:center; background-color: #b57f59;" onclick= "change16()">3</button></div>
<p class="headertext">ANASTASIA BEVERLY HILLS</p>
<p class="title">Stick Foundation</p>
<p class="descriptiontext">Price: $25</p><br>
<div id ="face"><img class="center" src="https://s5.postimg.org/5njj506rb/fair.png" id="foundation2" alt="Pro Coverage Illuminating Foundation" height="350" width="350">
<div class ="button">
<button class="buttondeco" style="text-align:center; background-color: #e1c49c;" onclick= "change17()">1</button>
<button class="buttondeco" style="text-align:center; background-color: #d19f6c" onclick= "change18()">2</button>
<button class="buttondeco" style="text-align:center; background-color: #b57f59;" onclick= "change19()">3</button></div>
<p class="headertext">L.A. GIRL</p>
<p class="title">Pro Coverage Illuminating Foundation</p>
<p class="descriptiontext" style="border:none;">Price: $10</p>
<div id="footer">
<div class="copyright">
<p style="float: left; margin:0px 0px 0px 15px; font-size:13px;">Payment Options</p> <br>
<img src ="https://s5.postimg.org/c4ho5llx3/Visa.png" alt="visa" style="float: left; margin: 0px 0px 0px 15px; width:50px;height:31px;">
<img src ="https://s5.postimg.org/grnq7d99z/Master_Card_Inverted.png" alt="mastercard" style="float: left; margin: 0px 0px 0px 10px; width:50px;height:31px;">
<img src ="https://s5.postimg.org/arzz3pohj/Pay_Pal.png" alt="paypal" style="float: left; margin: 0px 0px 0px 10px; width:50px;height:31px;">
<p style="float: left; margin:-15px 0px 0px 140px; font-size:13px;">Need Help?</p><br>
<p style="float: left; margin:-15px 0px 0px 140px; font-size:12px;">contact.sg@beautystyle.com</p>
<p style="float: right; margin: 60px 550px 0px 0px; font-size:11px;">© 2016 Beauty Style.</p><br>
<p style="float: right; margin: 60px -95px 0px 0px; font-size:11px;">All rights reserved</p><br>
<a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;"><span></span></a>
</div>
</div>
</body>
It works for me too in Firefox 48 - downloading updates to see if the latest has any trouble.
https://jsfiddle.net/ewf4u67t/5/ works for me in the updated Firefox 50.1.0 too.
What browser console error do you get when it doesn’t work for you?
[quote=“jerlynt712, post:9, topic:249318, full:true”]
Thanks, it’s working now in firefox now, however, when i paste the code to my texteditor, it still gives me the same problem after i run the webpage. Im not sure if it’s due to an error on how i linked the javascript file[/quote]
There’s nothing wrong with how you’ve linked it, but the script tags are better placed at the end of the body.
thank you! It’s working now
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.