I have a link that when clicked should assign a rails variable to a JavaScript variable. The JavaScript is then used to calculate the price. I have the price calculated with a hard coded value at the moment.
in the html I need data-price to be var blankPrice in the js. Any help would be great.
$("a.shirt-color-link").on("click", function(){
calculatePrice($(this));
})
function calculatePrice(){
var blankPrice = obj.attr("data-price");
console.log(blankPrice)
var pricePerSide = 3;
var printedSides = 0;
if (frontCanvas) {
var frontCanvasJson = JSON.parse(frontCanvas);
if (frontCanvasJson && frontCanvasJson.objects.length > 0)
printedSides++;
}
if (backCanvas) {
var backCanvasJson = JSON.parse(backCanvas);
if (backCanvasJson && backCanvasJson.objects.length > 0)
printedSides++;
}
var total = blankPrice + (pricePerSide * printedSides);
$('.base-price').text('$' + total);
}
<a
tabindex="-1"
data-original-title="<%= shirt_color.color_name.titleize %>"
class="shirt-color-link"
data-color="#<%= shirt_color.hex %>"
data-price="<%= product.base_price %>"
data-product-id="<%= product.id %>">
</a>
Where is the click handler for the link element?
You can do the following in jQuery: first add a click hander to the link:
$("a.shirt-color-link").on("click", function(){
calculatePrice($(this));
})
Then in calculatePrice add argument obj and replace var blankPrice = 5; with:
var blankPrice = obj.attr("data-price");
obj refers to the clicked link and it's data-attributes.
$('.shirt-color-link').attr("data-price", blankPrice);
EDIT - this is changing the "data-price" attribute to be whatever the value of the blankPrice variable is. You might want it the other way round, on reading again (it's a bit unclear), in which case do
var blankPrice = parseInt($('.shirt-color-link').attr("data-price"));
Related
I have this part of my html (more than one of same type):
<div class="this-product">
<img src="images/bag2.jpeg" alt="">
<span class="product-name">iPhone</span>
<span class="product-price">345445</span>
</div>
And this part of my javascript code meant to get the innerHTML of the span tags and assign them values as shown:
var productList = document.querySelectorAll('.this-product');
productList.forEach(function (element) {
element.addEventListener('click', function (event) {
var productName = document.getElementsByClassName('product-name')[0].innerHTML;
var productPrice = document.getElementsByClassName('product-price')[0].innerHTML;
var cartProductname = event.currentTarget.productName;
var cartProductprice = event.currentTarget.productPrice;
var cartContent = '<div class="cart-product"><span class="block">'+cartProductname+'</span><span class="block">'+cartProductprice+'</span></div><div class="cart-result">Total = </div><br>'
document.getElementById('dashboard-cart').innerHTML += cartContent;
});
});
Everything works well and every variable above has its value shown well apart from cartProductname and cartProductprice which display as undefined and also vscode tells me that productName is declared but not read. Where could I be wrong?
If I understand your question correctly, you could call querySelector on each product item element that you are iterating like so:
var productList = document.querySelectorAll('.this-product');
productList.forEach(function (element) {
element.addEventListener('click', function (event) {
// Update these two lines like so:
var productName = element.querySelector('.product-name').innerHTML;
var productPrice = element.querySelector('.product-price').innerHTML;
var cartProductname = productName; // event.currentTarget.productName;
var cartProductprice = productPrice; // event.currentTarget.productPrice;
var cartContent = '<div class="cart-product"><span class="block">'+cartProductname+'</span><span class="block">'+cartProductprice+'</span></div><div class="cart-result">Total = </div><br>'
document.getElementById('dashboard-cart').innerHTML += cartContent;
});
});
You can use event.currentTarget.querySelector('.product-name') to get element inside of another element
I'm new to Javascript, so bear with me. Let's say I have this link: example.com/img/000.png/. It displays an image source, so I'll put it in an image tag. <img src="example.com/img/001.png/">.
When I press a key (right arrow, for example), the link should change (inside the image tag) to example.com/img/001.png/, /002.png/, /003.png/, etc. is is possible, at all, to do this with Javascript, embedded in the raw HTML?
Here are my thoughts so far:
<img src=" <!-- Link generated by Javascript --> ">
<script>
// actually pythonic pseudocode, ok
counter = 0
if (right arrow key pressed):
counter = counter + 1
counterPrep = (3-len(counter))*'0'+str(counter)
// ^^^ changes the link from "1" to "001"
link = "https://www.example.com/img/"+str(counterPrep)+".png
</script>
I know what I'm asking may be unclear, so feel free to ask questions. I usually work in Python, which is why the pseudocode is so "Pythonic".
Thanks!
You can detect the key press of the user using the event called keypress.
The rigth arrow key has a key code 39, so you can do the following :
<img src="example.com/img/001.png" id="myImage">
<script>
var counter = 0;
document.body.addEventListener("keypress", function(e){
if(e.keyCode==39) {
counter ++;
var index = (("00" + counter).slice(-3));
var link = "https://www.example.com/img/"+index+".png";
document.getElementById('myImage').src = link;
}
});
</script>
Please see the snippet below:
document.getElementById("testBtn").onclick = function() {
var imgSrc = document.getElementById("dynamicImg").src;
var start = imgSrc.lastIndexOf("/") + 1, end = imgSrc.lastIndexOf("/") + 4;
var preUrl = imgSrc.substring(0, start);
var postUrl = imgSrc.substring(end, imgSrc.length);
// get the fileName
var imgName = parseInt(imgSrc.substring(start, end)) + 1;
// convert to 000 format
imgName = ("00" + imgName).slice(-3);
// replace img src
document.getElementById("dynamicImg").src = preUrl + imgName + postUrl;
alert(document.getElementById("dynamicImg").src)
};
<img id="dynamicImg" src="example.com/img/000.png" />
<button id="testBtn">
TEST
</button>
The code above will work using dynamic url.
I tried it using onclick button, but you can change the event ti keypress.
I hope this helps.
I have a JQuery function that fetches and displays a page worth of images through the use of JSON files. I want to display the next set of images upon a button click, but that requires adding on a short string to the request url, which is found and stored in a var when I first run the script. I need to call this JQuery function again and pass the string var to it (lastId in code below). I am an utter noob with JavaScript in general and don't know how to go about doing that.
Here is a full version of the code:
$(function runthis(un){
var lastId;
un = typeof un !== 'undefined' ? un : "";
$('#domainform').on('submit', function(event){
event.preventDefault();
$('#content').html('<center><img src="img/loader.gif" alt="loading..."></center>');
//var lastId;
var domain = $('#s').val();
var newdomain = domain.replace(/\//g, ''); // remove all slashes
var requrl = "http://www.reddit.com/r/";
var getmore;
getmore = "?after=t3_"+un;
var fullurlll = requrl + domain + ".json" + getmore;
$.getJSON(fullurlll, function(json){
var listing = json.data.children;
var html = '<ul class="linklist">\n';
for(var i=0, l=listing.length; i<20; i++) {
var obj = listing[i].data;
var votes = obj.score;
var title = obj.title;
var subtime = obj.created_utc;
var thumb = obj.thumbnail;
var subrdt = "/r/"+obj.subreddit;
var redditurl = "http://www.reddit.com"+obj.permalink;
var subrdturl = "http://www.reddit.com/r/"+obj.subreddit+"/";
var exturl = obj.url;
var imgr = exturl;
var imgrlnk = imgr.replace("target=%22_blank%22","");
var length = 14;
var myString = imgrlnk;
var mycon = imgrlnk;
var end = mycon.substring(0,14);
myString.slice(-4);
var test1 = myString.charAt(0);
var test2 = myString.charAt(1);
var timeago = timeSince(subtime);
if(obj.thumbnail === 'default' || obj.thumbnail === 'nsfw' || obj.thumbnail === '')
thumb = 'img/default-thumb.png';
if(end == "http://i.imgur" ){
$("#MyEdit").html(exturl);
html += '<li class="clearfix">\n';
html += '<img src="'+imgrlnk+'" style="max-width:100%; max-height:750px;">\n';
html += '</li>\n';
html += '<div class="linkdetails"><h2>'+title+'</h2>\n';
/*html += '<p class="subrdt">posted to '+subrdt+' '+timeago+'</p>'; /*'+test1+test2+'*/
html += '</div></li>\n';
}
if (listing && listing.length > 0) {
lastId = listing[listing.length - 1].data.id;
} else {
lastId = undefined;
}
} // end for{} loop
htmlOutput(html);
}); // end getJSON()
}); // end .on(submit) listener
function htmlOutput(html) {
html += '</ul>';
$('#content').html(html);
}
});
The way you currently are executing the function run this doesn't ever leave you a handle to that function. This means it only really exists in the context of document.ready (what $(function()) is a shortcut for).
What you want to do instead is to keep a reference to this function for later use.
If you want to be able to put it directly into an onclick='' you will need to put the function in global,
eg:
var myFunction = function() { /*Stuff here*/}
$(myFunction)
this declares a function called myFunction and then tells jQuery to execute it on document ready
Global is generally considered pretty naughty to edit. One slightly better option would be to assign the click to the button inside your javascript
eg:
$(function(){
var myFunction = function() { /*Stuff here*/}
myFunction(); //call it here
$('#my-button-id').click(myFunction);//attach a click event to the button
)
This means that the function myFunction only exists in the scope of your document.ready, not in global scope (and you don't need onclick='' at all)
tTo add listener on some event you can use live('click',function(){}) Like yhis:
<div id="my-button">some content</div>
<script type="text/javascript">
$('#my-button').live('click',function(){
//your code
})
</script>
I'm trying to create a script which gives me direct links to files on zippyshare.com. There is a JS function responsible for the href of the download button. It calculates a value which is necessary for the direct link. For example, the file under this link http://www25.zippyshare.com/v/50781357/file.html brings this:
<a id="dlbutton" href="#"><img src="/images/download.png" alt="Download" border="0"></a>
<script type="text/javascript">
var somffunction = function() {
var a = 469398;
document.getElementById('dlbutton').omg = 469401%78956;
var b = parseInt(document.getElementById('dlbutton').omg) * (469401%3);
var e = function() {if (false) {return a+b+c} else {return (a+3)%b + 3}};
document.getElementById('dlbutton').href = "http://www25.zippyshare.com/d/50781357/"+(b+18)+"/Groove%20Coverage%20-%20Holy%20Virgin%20%28Rob%20Mayth%20Remix%29%204clubbers.com.pl.mp3";
};
</script>
The main problem is, the value of var a is different everytime. I tried to access this value with PHP and then I built some script to calculate the value which is the part of the direct link:
function zippy_id($zippylink)
{
$content = file_get_contents($zippylink);
$val = explode('var a = ',$content);
$val = explode(';',$val[1]);
$val = $val[0];
return (($val+3) % 78956 * (($val+3) % 3)) + 18;
}
The function doesn't give the right value. Can anyone validate this PHP function? Does anybody see a better solution to get direct download links?
It seems like you can ignore your ever changing a, but instead read the other value and adjust your formula, the function e() is just a distraction:
return (469401 % 78956) * (469401 % 3) + 18;
Though this highly looks like inappropriate usage.
I have the following code working to pass a URL parameter to a form tag:
<script type="text/javascript">
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
function onLoad() {
var value = getQueryVariable("ID");
var e = document.getElementById('your-field');
e.value = value;
}
</script>
And...
<body onload="onLoad()">
<!-- your form and hidden field goes here -->
<input type="hidden" name="your-field" id="your-field" />
How can I pass the same value to an HTML link so that the end result would be:
<a href="http://www.mysite.com?source=[ID]" >
Where [ID] is the whatever piece of code that is needed to add the parameter to the link?
Thanks in advance.
You should give an id to you link, like this:
<a id="YOUR_ID" href="#" >
And then you have two ways to solve the problem, use pure Javascript or use jQuery:
IF you use jquery you can use your onLoad function and inside inject the following:
var url = "http://www.mysite.com?source=" + value;
$("#YOUR_ID").attr("href",url)
OR using pure javascript:
var url = "http://www.mysite.com?source=" + value;
var element = document.getElementById('YOUR_ID');
element.setAttribute("href",url)
Change the function onload to this:
function onLoad() {
var value = getQueryVariable("ID");
var e = document.getElementById('your-field');
e.value = value;
var url = "http://www.mysite.com?source=" + value;
var element = document.getElementById('YOUR_<A>_ELEMENT_ID');
element.setAttribute("href",url)
}
I'm using the piece of code that Joao Almeida suggested so his example using jQuery works good too.
Good Luck!