depdivr Posted October 21, 2011 Share Posted October 21, 2011 Help. I am a newbie to programming in Javascript and CSS. I have found this website to be extremely helpful. However I am working on integrating a google shopping cart into my site and have been running into some snags when I try to impliment Javascript to work with the shopping cart. Here is a snip-it of my code. <link rel="stylesheet" type="text/css" href="style.css" /><script type="text/javascript">window.onload=function(){var caption=['Default Image Caption',],pic1=document.getElementById('pic1'),combobox=document.getElementById('color1');pic1.src='pics/red.jpg';combobox.onchange=function(){pic1.src='pics/'+this.value+'.jpg';}}</script></head><script id='googlecart-script' type='text/javascript' src='https://checkout.google.com/seller/gsc/v2_2/cart.js?mid=xxxxxxxxxxxxxxx' integration='jscart-wizard' post-cart-to-sandbox='false' currency='USD' productWeightUnits='LB'></script> <body><div id="googlecart-widget-control" googlecart-widget-control-align="left" style="text-decoration:underline;height:30px"> View cart (<span id="googlecart-item-count"></span> - <span id="googlecart-subtotal"></span>)</div> <img width=200 src=pic1.src id="pic1"><p id="Title1">1.5in Traditional Bow</p><p id="descr1">Each bow is hand tied and placed on a Mini Alligator clip. <br>They also contain a No-Slip strip on it to help hold even <br>the finest of hair.<font color=red> <br>May contain small parts. Not intended for children <br>under age 3 without adult supervision.</p></font><div id="product1" class=product><INPUT class=product-title value='1.5 inch Traditional Bow' type=hidden><INPUT class=product-image value="pics/1.5in trad.JPG" type=hidden>Worn on: <input class="product-attr-color" name="color1" type="radio" value="Left"/> Left Side <input class="product-attr-color" name="color1" type="radio" value="Right" checked="checked"/> Right Side<br/>Color: <SELECT id="color1" class="product-attr-custom"><OPTION selected value=Red>Red</OPTION><OPTION value="Black">Black</OPTION><OPTION value="Turftan">Turftan</OPTION></SELECT><br> Price: <span class="product-price">$2.00</span><br/><INPUT class=product-price value=2.00 type=hidden><br><DIV class=googlecart-add-button title="Add to cart" role=button tabindex="0"></DIV></div> I have more HTML than this but it should give a good idea of what I am working with. I have two questions 1) Why do I need to have var caption=['Default Image Caption',], in order for the script to change the image based on the dropdown value? If I comment out that code it fails to load any image but I am not using a caption for the image. 2) When the option is selected for white, I want to move the white image to the shopping cart. The code to move the image to the shopping cart is <INPUT class=product-image value="pics/1.5in trad.JPG" type=hidden> . If I try to change the value to be pic1.src it will not load any image to the shopping cart. Is it possible to dynamically set the image for the shopping cart based on the value of a drop down field? Link to comment Share on other sites More sharing options...
justsomeguy Posted October 21, 2011 Share Posted October 21, 2011 First, on this line: var caption=['Default Image Caption',], that comma inside the brackets shouldn't be there. That says there is another item in the list, but there isn't. Most browsers will ignore that but it will be a fatal error in older versions of IE. If you only comment out the first line, like this: //var caption=['Default Image Caption'],pic1=document.getElementById('pic1'),combobox=document.getElementById('color1'); The problem is that those three lines are part of one statement. The commas separate the three lines so that they all use the var keyword. It could be written like this: var caption=['Default Image Caption'], pic1=document.getElementById('pic1'), combobox=document.getElementById('color1'); or indented for clarity: var caption=['Default Image Caption'], pic1=document.getElementById('pic1'), combobox=document.getElementById('color1'); The var keyword there applies to all three lines, so if you comment out the first line then you have two lines just separated by commas. If you want to remove that line you need to move the var keyword to the next line: //var caption=['Default Image Caption'],var pic1=document.getElementById('pic1'),combobox=document.getElementById('color1'); That error causes the rest of the code not to run, so it never sets the change handler for the dropdown. For your second question, you need to target the input with Javascript and set the value. When you write "pic1.src" in there like you did with the image it looks for a file called "pic1.src", it doesn't assume that's a Javascript expression to be evaluated. combobox.onchange=function(){ pic1.src='pics/'+this.value+'.jpg'; document.getElementById('product-image').value = 'pics/' + this.value + '.jpg';} You need to put an ID on the input element and then you can access it like that. You also need to quote all of your attribute values, you have several elements with unquoted attribute values. Before you change anything, look at your browser's error console to see what errors like this look like. There are links in my signature if you don't know how to open the error console. Link to comment Share on other sites More sharing options...
depdivr Posted October 21, 2011 Author Share Posted October 21, 2011 Thank you so much. I am a closet programmer doing so on my spare time. I am pretty much self taught and tend to rely on examples of code that other people post to try to figure out how to do things. I completely missed the Var definition. Of course the code will fail. DUH!!! The 2nd part worked beautifully once I defined an ID for the image. I was only defining a class and not the ID in the original code. Is there a quick easy way to set the initial image value? Right now the code runs on the drop down changing. How can I set the 1st value of the image when the page first loads. Or be able to run the code when the page loads. I will be utilizing the code many times over(Copy, Pasting and changing variables) but do not want to have to set the initial state of the image every time since the value will be different for every image block. Right now I am hard coding the first image reference. pic1.src='pics/red.jpg'; sorry for not using code tags above but when I tried it would change the code to things related to color How can I set this from the default value of the dropdown? Link to comment Share on other sites More sharing options...
justsomeguy Posted October 21, 2011 Share Posted October 21, 2011 You can get the selected value of the dropdown through the options array. Here's the reference for a select element: http://www.w3schools.com/jsref/dom_obj_select.asp So it has an options collection, and a selectedIndex property. So you can get the selected option like this: var el = document.getElementById('color1');var option = el.options[el.selectedIndex]; Here's the reference for the option element, which has a property called value that you can use to get the value of the option: http://www.w3schools.com/jsref/dom_obj_option.asp The value is "Red", so if you want to translate "Red" to "red.jpg" then you need to convert it to lowercase and add the extension, and set that as the src of the image. http://www.w3schools.com/jsref/jsref_tolowercase.asp Link to comment Share on other sites More sharing options...
depdivr Posted October 21, 2011 Author Share Posted October 21, 2011 Perfect Thanks for the help. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.