Clever Geek Handbook

Javascript: passing tag value to variable

I hope you can help me find a solution to this problem. I have a page with a series of anchor tags that contain an id with a unique element. Here's a sample of links:

<a href="#" class="button" id="widget_1" 
   onclick="$(this).parent().submit(); return false;">Button</a>

<a href="#" class="button" id="widget_2" 
   onclick="$(this).parent().submit(); return false;">Button</a>

<a href="#" class="button" id="widget_3" 
   onclick="$(this).parent().submit(); return false;">Button</a>

Below is the code I was trying to create to collect values ​​in "id":

var num = [];
for (var i = 0; i<11; i++) {
  num[i] = document.getElementsByTagName("id")[i].textContent;
    if (num[i] == "widget_1"){ var y = "39.00"; return y;}
    else if (num[i] == "widget_2"){ var y = "59.00"; return y;}
    else if (num[i] == "widget_3"){ var y = "85.00"; return y;}
    else { var y = "0";}

 return y; }

What I'm trying to do is grab what's on the id and use that to pass it into an array, and if the content matches, then return the value "y". For example, if I click on the second link, 59.00 is returned. Any help that can be provided would be greatly appreciated. Thanks, Ridder

+3


source to share


5 answers


Another approach

This approach also allows you to remove onclick events in the markup and improve readability by decoupling behavior from structure . (aka Separation of concerns )



// put your prices on an array;
var prices = [39.0, 59.0, 85.0];

// match all widget(s) (aka anchors), add click handler.
$("[id^=widget]").click(function(element) {
   // calculate the index into prices array based on anchor id.
   var index = parseInt(this.id.substring(7)) - 1;

   // get the pirce
   var price = prices[index];
    
   alert("Price is: " + price);

   // here you could call 
   // this.$parent.submit();
});
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="button" id="widget_1">Button</a>
<a href="#" class="button" id="widget_2">Button</a>
<a href="#" class="button" id="widget_3">Button</a>
Run codeHide result


Pure Javascript

This version is without jQuert. Enjoy!

Note. There are some restrictions on older browsers (IE <8 & FF3.0)



// put your prices on an array;
var prices = [39.0, 59.0, 85.0];

var elements = document.querySelectorAll('[id^=widget]');

Array.prototype.forEach.call(elements, function(element) {
  
  var index = parseInt(element.id.substring(7)) - 1;
  var price = prices[index];
  element.onclick = function(event) {
       alert(price);
  };
  
});
      

        
        
        
      

    
<a href="#" class="button" id="widget_1">Button</a>
<a href="#" class="button" id="widget_2">Button</a>
<a href="#" class="button" id="widget_3">Button</a>
Run codeHide result


Extract number only



var r = /\d+/;
var s = "add_to_cart_sku_ThisItemA1_CEB";
var index = s.match(r);
alert (index);
Run codeHide result


Extract substring (eg "ItemA1")



var code = "add_to_cart_sku_ThisItemA1_CEB";
var strIndex = code.substring(code.indexOf("Item"), code.lastIndexOf('_'));
alert (strIndex);
Run codeHide result


+1


source


if we can define a function:



function MatchID(id) {
  var y = "0";
  if (id == "widget_1") {
    y = "39.00";
  } else if (id == "widget_2") {
    y = "59.00";
  } else if (id == "widget_3") {
    y = "85.00";
  }
  return y;  
}
      

        
        
        
      

    
<a href="#" class="button" id="widget_1" onclick="MatchID($(this).attr('id'));$(this).parent().submit(); return false;">Button</a>
Run codeHide result


+1


source


use this

switch(document.getElementById(this.id)){
    case "widget_1":
        var value = "59.00";
        break;
    case "widget_2":
        var value = "60.00";
        break;
    case "widget_3":
        var value = "61.00";
        break;
}
return value;

this is what you need to do the main work, now you just need to click there, if it is another page you need to know how it was sent and how it was received

hope this helps.

+1


source


document.getElementsByTagName

the html tag name must be specified instead of id and you can access its attribute id

as document.getElementsByTagName("a")[i].id


your code should look like this:

var num = [];
for (var i = 0; i<11; i++) {
num[i] = document.getElementsByTagName("a")[i].id;
if (num[i] == "widget_1"){ var y = "39.00"; return y;}
else if (num[i] == "widget_2"){ var y = "59.00"; return y;}
else if (num[i] == "widget_3"){ var y = "85.00"; return y;}
else { var y = "0";}
return y; }
0


source


document.getElementsByTagName("id")

this line in your code is wrong because there are no tags in html called `.

To get all the tags <a>

in your document, there is an interface property HTMLDocument

called an object document

that represents the entire html document. To get all tags <a>

. use this.

document.links

this method returns a collection of tags <a>

, you can access this collection just like an array. For example, to access the first child in this collection.

document.links[0].href

to get its href value or get its id you do document.links[0].id

. Hope it helps

0


source






More articles:


All Articles