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
  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
    4,067
    Thanks
    14
    Thanked 428 Times in 424 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).
    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
    4,067
    Thanks
    14
    Thanked 428 Times in 424 Posts
    there’s a nice article about style switching @AListApart
    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,576
    Thanks
    3
    Thanked 515 Times in 502 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>
    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
    •