Solved

can innerHTML be replaced with something more efficient

Posted on 2013-01-08
18
152 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 33

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 33

Expert Comment

by:Big Monty
ID: 38755859
are you able to work with jQuery?
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

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 33

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 33

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
 

Author Comment

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

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to format numbers and letters in nested lists 5 31
Json Schema 8 32
Html value of radio 14 27
formvalidation.io validate form on class click 4 8
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

792 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