html - using javascript to change display -


so looked @ other questions , found answer chosen on link:

toggle (show/hide) element javascript

this below following function works in answer change display.

function toggle(id) { var element = document.getelementbyid(id);    if (element) {     var display = element.style.display;      if (display == "none") {         element.style.display = "block";     } else {         element.style.display = "none";     }   } }

i tried in code, it's not working. i've attached link jsfiddle @ end or post.

i have parent div id of #activities. contains multiple children, important ones li,p, , div has id #suggestion_input. below html.

html

<div id="activities" class="info_container">         <h1>our activities</h1>         <div class="contain">             <ul>                   <li>activity 1</li>                 <li>activity 2</li>                 <li>activity 3 </li>                 <li>activity 4 </li>                 <li>activity 5</li>                 <li>activity 6 </li>                 <li>activity 7</li>                 <li>your suggestions</li>             </ul>             <p>                  bacon ipsum dolor sit amet ribeye tenderloin meatball, chuck andouille beef ribs jerky ...             </p>             <div id="suggestion_input">                 <label for="name" >your name</label>                 <input type="text" id="name" name="name">                 <label for="email">email</label>                 <input type="email" id="email" name="email">                 <label for="suggestions">suggestions</label>                 <textarea id="suggestions" name="suggestions" rows="39"></textarea>             </div>

when user clicks last li in ul called "your suggestions", p have display set none , #suggestion_input have display of inline-block. currently, css set inline-block , none respectively.

css

 #activities p{  display:inline-block;  width:500px;  vertical-align:top;  margin-top:20px;  margin-left:20px;  background:#fffda1;  }   #suggestion_input{  display:none;  margin-left:150px;  vertical-align:top;  margin-top:20px;  text-align:center;   }

and javascript think reflects answer in link except isn't function.

javascript - code part of addeventlistener. event "click".

 if(e.target.innertext === 'your suggestions'){              var para = document.getelementbyid('activities').queryselector('p');             var display = para.style.display;             /* if uncomment this, following code work             outside of if display == 'inline-block' condition              para.style.display = 'none';             suggestion_input.style.display = 'inline-block';              */              if(display == 'inline-block'){                 // code not work                 para.style.display = 'none';                 suggestion_input.style.display = 'inline-block';                 console.log('works');             }         }else{             if(display == 'none'){                 display = "inline-block";             }         }     }

when click, nothing happens. error because of condition in if statement of "display == 'none'" ?

here jsfiddle: http://jsfiddle.net/a4t7w/1/

okay, start, part of problem understanding para.style.display equals inline-block set in style sheet. unfortunately in usage javascript accessing inline styles defined element , not defining external css.

so statement: if(display == 'inline-block') never returns true because display set "". if aren't already, familiar firebug firefox. wonders helping debug kind of stuff.

another thing here: if(e.target.innertext === 'your suggestions'). instead of innertext should use innerhtml or textcontent. innertext property ie thing.

now, solve problem! see attaching click event <div> element holds <ul> element. if need click event function on "suggestions" <li> recommend isolate particular element when attaching listener.

change html , js: 

<li id="suggestiontoggle">your suggestions</li> ... document.getelementbyid('suggestiontoggle').addeventlistener("click",function(e) ...

next can rewrite javascript test presence of "" or inline-block when setting styles on <p> element. here's updated version of code:

document.getelementbyid('activities').addeventlistener("click",function(e) {     var suggestion_input = document.getelementbyid('suggestion_input');     var para = document.getelementbyid('activities').queryselector('p');     var light_green = document.getelementbyid('activities').queryselector('.light_green');         if(light_green){     light_green.style.backgroundcolor="red";     light_green.classname = "";     e.target.style.backgroundcolor = '#0dffb9';     e.target.classname = 'light_green'; } else {     e.target.style.backgroundcolor = '#0dffb9';     e.target.classname = 'light_green'; }  if(e.target.innerhtml == 'your suggestions') {            var display = para.style.display;                 if(display == 'inline-block' || display == "") {         // code not work ** now! **         para.style.display = 'none';         suggestion_input.style.display = 'inline-block';     } else {         if(display != "inline-block") {             para.style.display = "inline-block";             suggestion_input.style.display = "none";         }     } } else {             para.style.display = "inline-block";     suggestion_input.style.display = "none"; }

});

js fiddle see toggle in action here: http://jsfiddle.net/ryuz5/8/

hope helps!

edit: enabled proper toggling accidentally stripped out noted yancie.


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more