We help IT Professionals succeed at work.

can innerHTML be replaced with something more efficient

prowebinteractiveinc
on
185 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
Comment
Watch Question

Big MontyWeb Ninja at large
CERTIFIED EXPERT

Commented:
if its just text you want to add, try innerText
doesnt work either...
does the same thing as innerHTML
Big MontyWeb Ninja at large
CERTIFIED EXPERT

Commented:
are you able to work with jQuery?
I dont know why not ?
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

Big MontyWeb Ninja at large
CERTIFIED EXPERT

Commented:
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')

Commented:
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
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
Web Ninja at large
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
k, done, but its still changing my css
Big MontyWeb Ninja at large
CERTIFIED EXPERT

Commented:
is displayPrice a DIV? can you post the html for it?

Commented:
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
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

Commented:
Why don't you simply assign a value to the price label/object you want to display?
are you saying to replace the div to a label ?

Commented:
What exactly is the issue?  Is it that your price isn't styled correctly?

Commented:
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.
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 !
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.