Solved

can innerHTML be replaced with something more efficient

Posted on 2013-01-08
18
144 Views
Last Modified: 2013-10-30
I am currently using innerHTML to put a price inside a div.

first of all the innerHTML is screwing with my styles eg: if the contents with in the div is hardcoded, I have no issues with my css, but if I use innerHTML it screws it all up ?

Also is innerHTML friendly with all browsers ?

are there any better alternatives ?

Thanks
0
Comment
Question by:prowebinteractiveinc
  • 8
  • 5
  • 3
  • +1
18 Comments
 
LVL 32

Expert Comment

by:Big Monty
ID: 38755826
if its just text you want to add, try innerText
0
 

Author Comment

by:prowebinteractiveinc
ID: 38755837
doesnt work either...
does the same thing as innerHTML
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 38755859
are you able to work with jQuery?
0
 

Author Comment

by:prowebinteractiveinc
ID: 38755900
I dont know why not ?
0
 

Author Comment

by:prowebinteractiveinc
ID: 38755919
this is my current javascript function

function customerPricing()
{
	var productForm = document.orderForm;
	var productDimensions = productForm.selectSize.value;
	var productColors = productForm.selectColors.value;
	var productStockId = productForm.productStock.value;
	var productQuantity = productForm.selectQuantity.value;
	
	for(i=0; i<=pl_pPrice.length; i++)
	{
		if(pl_pSizeId[i] == productDimensions && pl_colorsId[i] == productColors && pl_pStockId[i] == productStockId && pl_pQuantity[i] == productQuantity)
		{
			document.getElementById("displayPrice").innerHTML = formatCurrency(pl_pPrice[i]);
			
		}
	}
}

Open in new window

0
 
LVL 32

Expert Comment

by:Big Monty
ID: 38755992
check out http://jquery.com for more info, in the meantime, you can include a script link in your head tags to the url below and then change your code to:

<script type='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' />

function customerPricing()
{
	var productForm = document.orderForm;
	var productDimensions = $('#selectSize').val();
	var productColors = $('#selectColors').val();
	var productStockId = $('#productStock').val();
	var productQuantity = $('#selectQuantity').val();
	
	for(i=0; i<=pl_pPrice.length; i++)
	{
		if(pl_pSizeId[i] == productDimensions && pl_colorsId[i] == productColors && pl_pStockId[i] == productStockId && pl_pQuantity[i] == productQuantity)
		{
			document.getElementById("displayPrice").html( formatCurrency(pl_pPrice[i]) );
			
		}
	}
}

Open in new window


in jQuery, you reference a field by its ID using the syntax:

$('#IDofElement')
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 38756088
Here is a little JSFiddle I just created that keeps the styling using innerHTML: innerHTML and CSS styling

Are you not passing in elements and classes with your structure you are inserting via innerHTML?

-Chris
0
 

Author Comment

by:prowebinteractiveinc
ID: 38756600
The_Big_Daddy:  Am I suppose to put: $('#IDofElement')  in my code somewhere ? or do I just change the line 13 in the code you posted ? if so... for some reason my css is still messy

soupBoy: Im not passing any elements. im simply trying to insert a price eg: 12.99 in the div
0
 
LVL 32

Accepted Solution

by:
Big Monty earned 500 total points
ID: 38756614
no, that was just a reference for you.

change the line

document.getElementById("displayPrice").html( formatCurrency(pl_pPrice[i]) );

to 

$"#displayPrice").html( formatCurrency(pl_pPrice[i]) );

Open in new window

0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:prowebinteractiveinc
ID: 38756654
k, done, but its still changing my css
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 38756664
is displayPrice a DIV? can you post the html for it?
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 38756860
Here is a fiddle with and all that is being inserted via innerHTML is a string (just like your price requirement): Updated innerHTML

The DOM should still apply the latest css you are passing in (or not passing in) via innerHTML.  So, if you are having an issue with CSS, it has to be because you have CSS rules in place that are being met by your new content.  

innerHTML should be supported by all browsers...

Posting more of your code, or better yet, making a small example of your code in something like codepen.io or jsfiddle.net and posting a link here would be beneficial!

- Chris
0
 

Author Comment

by:prowebinteractiveinc
ID: 38756894
HTML:
<div class="content_product_price round_corners_5px">
          <h2 class="float_left"><div id="displayPrice" class="displayPrice"><? echo $productBasePrice; ?></div></h2> <h2 class="float_left cad">CAD</h2>

          <input name="productPrice" type="hidden" id="productPrice" value="<? //echo $myProductPrice; ?>" />
          <input name="totalProductPrice" type="hidden" id="totalProductPrice" value="<? //echo $myProductPrice; ?>" />
          
          <div class="clear_all"></div>
          
        </div>

Open in new window

Javascript:
function customerPricing()
{
	var productForm = document.orderForm;
	var productDimensions = productForm.selectSize.value;
	var productColors = productForm.selectColors.value;
	var productStockId = productForm.productStock.value;
	var productQuantity = productForm.selectQuantity.value;
	
	for(i=0; i<=pl_pPrice.length; i++)
	{
		if(pl_pSizeId[i] == productDimensions && pl_colorsId[i] == productColors && pl_pStockId[i] == productStockId && pl_pQuantity[i] == productQuantity)
		{
			$("#displayPrice").html("<span class='displayPriceInDiv'>" + formatCurrency(pl_pPrice[i]) + "</span>");

			
		}
	}
	document.getElementById("displayPrice").className = "displayPrice";
}

Open in new window

CSS:
.content_product_price {display:block; margin:15px 15px 0 0; border:solid 1px #ccc; width:174px; padding:25px 25px 20px 60px; text-align:center;}
.content_product_price h2 {font-size:30px; color:#F00; text-align:center; margin:6px 0 0 0;}
.content_product_price h2.cad {font-size:20px; color:#F00; text-align:center; margin:4px 0 0 7px;}
.content_product_price #displayPrice {font-family:Tahoma, Geneva, sans-serif; font-size:30px; color:#F00; text-align:center; margin:6px 0 0 0;}
.content_product_price .displayPriceInDiv {font-family:Tahoma, Geneva, sans-serif; font-size:30px; color:#F00; text-align:center; margin:6px 0 0 0;}
.content_product_price #currency {font-size:30px; color:#F00; text-align:center; margin:6px 0 0 0;}

Open in new window

0
 
LVL 9

Expert Comment

by:Sar1973
ID: 38758380
Why don't you simply assign a value to the price label/object you want to display?
0
 

Author Comment

by:prowebinteractiveinc
ID: 38758678
are you saying to replace the div to a label ?
0
 
LVL 8

Expert Comment

by:soupBoy
ID: 38758909
What exactly is the issue?  Is it that your price isn't styled correctly?
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 38760107
Or insert a label or text field in the div itself; obviously, if you want to change the structure and style of the whole div this may not be the best solution.
0
 

Author Comment

by:prowebinteractiveinc
ID: 38761374
soupBoy
it is styled correctly if I hard code the price in the div, but when it it inserted by javascript using innerHTML then it screws up !
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now