Home > Developer > Web Develop
The page often needs to establish a matching, corresponding relationship to change the page display elements; You might want to use a custom attribute to add an index value.
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"><title>Custom Attributes Match index values</title></Head><Body><inputtype= "button"value= "BTN1" /><inputtype= "button"value= "BTN2" /><inputtype= "button"value= "Btn3" /><P>A</P><P>B</P><P>C</P><Scripttype= "Text/javascript"> varabtn=document.getElementsByTagName ('input'); vararr= ['American Team', 'Iron Man', 'Green Giant']; varAP=document.getElementsByTagName ('P'); To establish a "match", "correspondence" relationship, the index value is used; for(varI=0; I<abtn.length; I++) {Abtn[i].index=i; Custom attributes (index values); Abtn[i].onclick= function(){ //this.value = Arr[this.index]; Click the button to match the corresponding nameap[ This. index].innerhtml=arr [ This. index]; Match the corresponding P-element}}</Script></Body></HTML>
Ideas:
Click the button to change the corresponding p content below,
What does it change for? Change to the contents of the corresponding array, for example: the first button to change the content of the first P element, the content from the first element of the array;
The custom value here is equivalent to a bridge. Links to buttons, arrays, p tags
Custom attributes establish matching and correspondence--js Learning Note 2015-5-27 (40th day)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
