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
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
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]);
}
}
}
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' />
in jQuery, you reference a field by its ID using the syntax:
$('#IDofElement')
<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]) );
}
}
}
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
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
soupBoy: Im not passing any elements. im simply trying to insert a price eg: 12.99 in the div
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
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
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>
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";
}
.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;}
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.