Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
Like Tree3Likes
  • 1 Post By Dormilich
  • 1 Post By Dormilich
  • 1 Post By vwphillips

Thread: addEventListener in JavaScript

  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts

    addEventListener in JavaScript

    Hello everyone, I am new here.

    I have a problem with a code that i would appriciate some help with.
    It is suposed to be a list with 4 options that will change the CSS style

    I want to put all the event-endler in the JavaScript file. I tried to put a id on select then use addEventListener onchange in the JavaScript
    but i just can't get it to work, Any tips on how i could do?

    Thanks alot for help, I'am really stucked here

    Edit fiddle - JSFiddle

    HTML:
    Code:
    <select>
        <option value="1" onclick="changeStyle(0)">Stil 1</option>
        <option value="2" onclick="changeStyle(1)">Stil 2</option>
        <option value="3" onclick="changeStyle(2)">Stil 3</option>
        <option value="4" onclick="changeStyle(3)">Stil 4</option>
    </select>

    Code:
    function changeStyle(style){                                                
    
      createCookie("style", style, 30);
    
      var links = document.getElementsByTagName("link");
    
      for(var i=0; i<4; i++){
        if(i == style){
          links[i].disabled = false;
        }else{
          links[i].disabled = true;
        }
      }
    }
    
    
    
    
    
    function init(){
    
      var style = readCookie("style");                       
    
      if (style == null){
        style = 0;
      }
      changeStyle(style);
    
    }
    
    window.onload = init;
    
    
    
    
    //cookie
    
    function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Maybe this will help ?

    Code:
    <html>
     <head>
     <title>JavaScript</title>
     <script type="text/javascript">
     window.onload = init;
    function init(){
     sel.addEventListener("change",selChangeHandler,false); 
    }
    function selChangeHandler(){
       dsply.innerHTML = this.value;
    }
     </script>
     </head>
     <body>
     <select id="sel">
        <option value="1" >Stil 1</option>
        <option value="2" >Stil 2</option>
        <option value="3" >Stil 3</option>
        <option value="4" >Stil 4</option>
    </select>
    <div id="dsply"></div>
     </body>
     </html>

  • Users who have thanked DaveyErwin for this post:

    bengt (06-24-2014)

  • #3
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hello! Thank you for helping!

    Does't work for me, but it is most likely me that do wrong.

    I want to activate the function changeStyle, when selecting the options.
    Something like this?
    Sorry I am new and trying to learn

    function init(){
    document.getElementById("sel").addEventListener("change", function(e) {
    if (!changeStyle()) e.preventDefault();
    }, false);
    }

    window.onload = init;

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <html>
     <head>
     <title>JavaScript</title>
     <script type="text/javascript">
     function init(){
     sel.addEventListener("change",
     function() {
      changeStile(this);
      }, 
     false);
     }
    function changeStile(el){
     dsply.innerHTML=el.value
    }
     window.onload = init; 
     </script>
     </head>
     <body>
     <select id="sel">
        <option value="1" >Stil 1</option>
        <option value="2" >Stil 2</option>
        <option value="3" >Stil 3</option>
        <option value="4" >Stil 4</option>
    </select>
    <div id="dsply"></div>
     </body>
     </html>
    Last edited by DaveyErwin; 06-24-2014 at 05:47 PM.

  • Users who have thanked DaveyErwin for this post:

    bengt (06-24-2014)

  • #5
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DaveyErwin View Post
    Code:
    <html>
     <head>
     <title>JavaScript</title>
     <script type="text/javascript">
     function init(){
     sel.addEventListener("change",
     function() {
      changeStile(this);
      }, 
     false);
     }
    function changeStile(el){
     dsply.innerHTML=el.value
    }
     window.onload = init; 
     </script>
     </head>
     <body>
     <select id="sel">
        <option value="1" >Stil 1</option>
        <option value="2" >Stil 2</option>
        <option value="3" >Stil 3</option>
        <option value="4" >Stil 4</option>
    </select>
    <div id="dsply"></div>
     </body>
     </html>
    I am really sorry to bother more about this but it doesn't work...
    If you have another extra minute i can attach a jsfiddle andf maybe you can see what i do wrong
    the select is at row 149 and your JS at 73

    Thank you again


    Edit fiddle - JSFiddle

  • #6
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    this code produces an error
    and javascript stops executing ...

    var links = document.getElementsByTagName("link");
    alert (links.length)//alerts 0
    for(var i=0; i<4; i++){
    if(i == style){
    links[i].disabled = false;//this line errors because links[0] is null
    }else{
    links[i].disabled = true;
    }
    }
    Last edited by DaveyErwin; 06-25-2014 at 03:41 PM.

  • Users who have thanked DaveyErwin for this post:

    bengt (06-26-2014)

  • #7
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,394
    Thanks
    13
    Thanked 353 Times in 349 Posts
    while there is a <link> element in HTML it has a totally different purpose (i.e. it is neither an option nor a hyperlink but a relational link).
    bengt likes this.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    bengt (06-26-2014)

  • #8
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    4
    Thanks
    4
    Thanked 0 Times in 0 Posts
    <link> Is in my <head>, I didn't include them in my fiddle. It is the diffrent stylesheets.
    I want the changeStyle fuction the run when selecting a style in the dropdown menu.
    I think i should put addEventListener onchange on id="sel", but i can't get it to work...

  • #9
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,394
    Thanks
    13
    Thanked 353 Times in 349 Posts
    there’s a nice article about style switching @AListApart
    bengt likes this.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <html>
     <head>
     <title>JavaScript</title>
     <script type="text/javascript">
    
    function init(){
     var sel=document.getElementById('sel'),style = readCookie("style");
     if (sel&&sel.addEventListener){
      sel.addEventListener("change",function() { changeStyle(sel.value); }, false);  // Not IE
     }
     else if (sel&&sel.attachEvent){
      sel.attachEvent('onchange',function(){ changeStyle(sel.value);});  // IE
     }
     else if (sel){
      sel.onchange=function(){ changeStyle(sel.value); }
     }
     if (style == null){
       style = 0;
     }
     sel.selectedIndex=Math.max(style-1,0);
     changeStyle(style);
    }
    
    function readCookie(nme){
     var re=new RegExp(nme+'=[^;]+','i');
     return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
    }
    
    function createCookie(n,v,d){
     document.cookie=n+'='+v+';expires='+(new Date(new Date().getTime()+d*86400000).toGMTString())+';path/;';
    }
    
    function changeStyle(style){
     createCookie("style", style, 30);
     var links = document.getElementsByTagName("INPUT"),i=0;
     for(; i<links.length; i++){
      if(i == style){
       links[i].disabled = false;
      }
      else{
       links[i].disabled = true;
      }
     }
    }
    
    
     window.onload = init;
     </script>
     </head>
     <body>
     <select id="sel">
        <option value="1" >Stil 1</option>
        <option value="2" >Stil 2</option>
        <option value="3" >Stil 3</option>
        <option value="4" >Stil 4</option>
    </select>
    
    <input name="" value="test" />
    <input name="" value="test" />
    <input name="" value="test" />
    <input name="" value="test" />
    <input name="" value="test" />
    
     </body>
     </html>
    bengt likes this.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •