escaped URL parameters statements if else switch

Question

There is a little problem with this code:

function getParameters() {
  var searchString = document.getElementById('input1').value,
      params = searchString.split("&"),
      hash = {};

  if (searchString == "") return {};
  for (var i = 0; i < params.length; i++) {
    var val = params[i].split("=");
    hash[unescape(val[0])] = unescape(val[1]);
  }
    console.log(hash);
  //return hash;

  if(val[0] == "class"){ //alert(val[1]); 
    $.each(hash, function( attribute, value ) {
      test_div.setAttribute(attribute,value);
    });
  }
  else if(val[0] == "color"){ //alert(val[1]); 
    $.each(hash, function( attribute, value ) {
      test_div.style[attribute]=value;
    });
  }


  monitor_test_div.innerText = ccc.innerHTML;  
}

Depending by the order in which the parameters are inserted, they are repeated or dont work...

style a div using escaped URL parameters

Demo: JSFiddle 1

Demo: JSFiddle 2

I would like to obtain this:

Example 1:

input:

opacity=0&src=link1&color=red&color=green&src=link2&height=200

output:

 <div src="link2" style="color: green;"></div>

Example 2:

input:

src=link1&color=red or color=red&src=link1

output:

 <div src="link1" style="color: red;"></div>

What do you expect the val[0] in 'if if(val[0]...' to contain? It'll be the key of the last url parameter... — fast, May 09 '14 at 10:38
I'm sorry also for my language, it is a bit hard for me because i am new in javascript & html.. However i'll quickly accept your answer, sure! — , May 09 '14 at 12:02

fast · Answer 1 · 2014-05-09T12:49:40.953

0

Maybe you want something like this:

var test_div = $('#test_divs_id');

for (var i = 0; i < params.length; i++) {
 var val = params[i].split("=");

 var key = unescape(val[0]);
 var val = unescape(val[1]);

 switch(key) {

  case 'class':            // treat 'class' key by ...
   test_div.addClass(val); // ... adding the value as a class
   break;

  case 'src':              // treat 'src' key,
  case 'href':             // treat 'href' key, maybe more ...
   test_div.attr(key, val); //... by adding as an attribute with value
   break;

  default:                 // all other keys...
   test_div.css(key, val); // ... are assumed css style names with value
   break;
 }

EDIT: Extended the switch with the examples + possibly more attributes

edited May 09 '14 at 12:49

answered May 09 '14 at 10:45

fast

885
7
15

I'm new in javascript guys, please can you show some example? – May 09 '14 at 10:54
Could you please add an example to your question of what input you expect to produce what output. – fast May 09 '14 at 10:59

score 0 · Accepted Answer · answered May 09 '14 at 12:24

in your line

if(val[0] == "class")

you are only checking the first element in your val array.

what you would want to do, is iterate through all the hash objects and simply check the attribute like this:

function getParameters() {
  var searchString = document.getElementById('input1').value,
      params = searchString.split("&"),
      hash = {};

  if (searchString == "") return {};
  for (var i = 0; i < params.length; i++) {
    var val = params[i].split("=");
    hash[unescape(val[0])] = unescape(val[1]);
  }
    console.log(hash);
  //return hash;
    $.each(hash, function( attribute, value ) {

        if(attribute=="color"){
            test_div.style[attribute]=value;
        }
        else if(attribute=="src"){
            alert(attribute);
            test_div.setAttribute(attribute,value);
        }
    });
}

here is a working FIDDLE

escaped URL parameters statements if else switch

2 Answers2

Linked