Solved

can innerHTML be replaced with something more efficient

Posted on 2013-01-08
18
146 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery Parallax 1 38
jQuery not working on ELSE... why? 2 24
Detect change of Select using JavaScript Only 12 47
Recordset containing single quotes 8 23
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

895 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

19 Experts available now in Live!

Get 1:1 Help Now