Link to home
Start Free TrialLog in
Avatar of prowebinteractiveinc
prowebinteractiveinc

asked on

can innerHTML be replaced with something more efficient

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
Avatar of Big Monty
Big Monty
Flag of United States of America image

if its just text you want to add, try innerText
Avatar of prowebinteractiveinc
prowebinteractiveinc

ASKER

doesnt work either...
does the same thing as innerHTML
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

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')
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
ASKER CERTIFIED SOLUTION
Avatar of Big Monty
Big Monty
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
k, done, but its still changing my css
is displayPrice a DIV? can you post the html for it?
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

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 ?
What exactly is the issue?  Is it that your price isn't styled correctly?
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 !