Javascript multiple quotes CSS property output incorrect

Question

I am trying to outputs an array of divs. My problem here is the quotes in the JS syntax.

}style = "style='background-color:#30C;'";

var add1    = 'add_to_collection(\''+k+'/'+i+'\');';

var add2    = 'change_color(\''+i+'/'+k+'\');';

divs_b = divs_b+"<div "+brk+" "+style+" onclick='"+add1+add2+" >"+k+"/"+i+"</div>\n";
}
}

document.getElementById('divs').innerHTML = divs_b; 

document.getElementById('start').style.display = "none";

I later have the following out put in the source code:

The quotes will totally come out differently and the CSS markup totally disappears.

 <div style="float:left;" class="divs" onclick="add_to_collection(" 2="" 1');change_color('1="" 2');="">2/1</div>
 <div style="float:left;" class="divs" onclick="add_to_collection(" 3="" 1');change_color('1="" 3');="">3/1</div>
 <div style="float:left;" class="divs" onclick="add_to_collection(" 4="" 1');change_color('1="" 4');="">4/1</div>
 <div style="float:left;" class="divs" onclick="add_to_collection(" 5="" 1');change_color('1="" 5');="">5/1</div>

My preferred output would look like the following:

 <div style="float:left;" class="divs" onclick="add_to_collection('2/1');change_color('1/2');" style="background-color:#30C;">2/1</div>

Here the whole function:

 function build(){


 /*var collect_border       =   document.getElementById('collect_border').innerHTML;
 var collect_objects    = document.getElementById('collect_objects').innerHTML;
 var collect_enemies    = document.getElementById('collect_enemies').innerHTML;*/

  var collect_exit      = document.getElementById('collect_exit').value;
 /*var collect_start        = document.getElementById('collect_start').value;
 var collect_bonus      = document.getElementById('collect_bonus').value;*/


 /*collect_border           = collect_border.split(';');
 collect_objects            = collect_objects.split(';');
 collect_enemies            = collect_enemies.split(';');*/
 collect_exit           = collect_exit;
 /*collect_start            = collect_start;
 collect_bonus          = collect_bonus.split(';');
 */

 var x_val  = document.getElementById('width').value;

 var y_val  = document.getElementById('height').value;

 var divs_b     = "";

 var brk    = "";

 var style  = "";


 for(var i=1;i<=y_val;i++){     



 for(var k=1;k<=x_val;k++){ 



if((i>1)&&(k==1)){
    brk = "style='clear:both;'";
}
else {
    brk = "style='float:left;'";    
}
// var addval = '"'+i+'"/"'+k+'"';
if(collect_exit!=""){
    col_exit = collect_exit.split("/");
    var col_exit_x = col_exit[0];
    var col_exit_y = col_exit[1];

    if((col_exit_x==i)&&(col_exit_y==k)){


    }
}style = "style='background-color:#30C;'";

var add1    = 'add_to_collection(\''+k+'/'+i+'\');';

var add2    = 'change_color(\''+i+'/'+k+'\');';

     divs_b = divs_b+"<div "+brk+" "+style+" onclick='"+add1+add2+" >"+k+"/"+i+"</div>\n";
 }
 }

 document.getElementById('divs').innerHTML = divs_b;    

 document.getElementById('start').style.display = "none";

 }

This would be *much* easier to deal with if not using *old* build-the-markup techniques. — user2864740, Mar 09 '15 at 17:16
For a start your onclick attributes are broken, if you want to give your function call values/arguments then use the single quotes if the onclick is using double quotes or vice versa. `onclick="add_to_collection('5=','1');"` Also separate you values/arguments using `,` Could you also display the full function. **All** relevant source code helps us give you the solution(s) or reason(s) behind your issue. — NewToJS, Mar 09 '15 at 17:17
possible duplicate of [How to properly escape quotes inside html attributes?](http://stackoverflow.com/questions/4015345/how-to-properly-escape-quotes-inside-html-attributes) — Luizgrs, Mar 09 '15 at 17:27
You need to display the rest of your javascript, this appears to be the end of a function.... where is the rest? It would be relevant to show the full function used to set the `divs` attributes. If you cannot display the **relevant source code** then I cannot help you, sorry. — NewToJS, Mar 09 '15 at 17:41

NewToJS · Answer 1 · 2015-03-09T18:23:36.323

This will build the element using createElement()

If you want to apply the same styles to each element, give the element a class and style the class.

----------DEMO----------

function build(){
//Use your existing values. I have added k & i for demo purposes
 var k="2";
 var i="1";
//Target = where you want the elements to be inserted
var target = document.getElementById('MyElements');
//Create new element
var element = document.createElement('div');
/*
You can apply other attributes -
element.setAttribute('id','YourID');
element.setAttribute('class','YourClass');
*/
element.setAttribute('style','float:left;background-color:#30C;');
element.setAttribute('onclick', 'add_to_collection(\''+k+'/'+i+'\');change_color(\''+i+'/'+k+'\');');
//Insert new element
target.appendChild(element);
// Set innerHTML to element.
element.innerHTML=" Click me! ";
}

/*To show the new elements trigger the functions*/
function change_color(a){
alert("change_color called. Values:"+a);  
}
function add_to_collection(a){
alert("change_color called. Values:"+a);  
}

<button onclick="build()">Bulid New element</button>
<div id="MyElements"></div>

Demo placed into your existing function

 function build(){
 /*var collect_border       =   document.getElementById('collect_border').innerHTML;
 var collect_objects    = document.getElementById('collect_objects').innerHTML;
 var collect_enemies    = document.getElementById('collect_enemies').innerHTML;*/
  var collect_exit      = document.getElementById('collect_exit').value;
 /*var collect_start        = document.getElementById('collect_start').value;
 var collect_bonus      = document.getElementById('collect_bonus').value;*/
 /*collect_border           = collect_border.split(';');
 collect_objects            = collect_objects.split(';');
 collect_enemies            = collect_enemies.split(';');*/
 collect_exit           = collect_exit;
 /*collect_start            = collect_start;
 collect_bonus          = collect_bonus.split(';');
 */
 var x_val  = document.getElementById('width').value;
 var y_val  = document.getElementById('height').value;
 var brk    = "";
 /*------- This isn't needed anymore
 var divs_b     = "";
 var style  = "";
 --------------------------------------*/
 for(var i=1;i<=y_val;i++){     
 for(var k=1;k<=x_val;k++){ 
if((i>1)&&(k==1)){
    brk = "clear:both;";
}
else {
    brk = "float:left;";    
}
// var addval = '"'+i+'"/"'+k+'"';
if(collect_exit!=""){
    col_exit = collect_exit.split("/");
    var col_exit_x = col_exit[0];
    var col_exit_y = col_exit[1];
    if((col_exit_x==i)&&(col_exit_y==k)){
    }
}
//--- (New) Added brk to set part of the style depending on the result from your if statement.
var target = document.getElementById('divs');
var element = document.createElement('div');
element.setAttribute('style',brk+'background-color:#30C;');
element.setAttribute('onclick', 'add_to_collection(\''+k+'/'+i+'\');change_color(\''+i+'/'+k+'\');');
target.appendChild(element);
element.innerHTML=k+"/"+i;
/* -------- This isn't needed anymore
style = "style='background-color:#30C;'";
var add1    = 'add_to_collection(\''+k+'/'+i+'\');';
var add2    = 'change_color(\''+i+'/'+k+'\');';
divs_b = divs_b+"<div "+brk+" "+style+" onclick='"+add1+add2+" >"+k+"/"+i+"</div>\n";
----------------------------------------- */
 }
 }
/*------------This isn't needed anymore
 document.getElementById('divs').innerHTML = divs_b;  
-------------------------*/  
 document.getElementById('start').style.display = "none";
 }

This should work for you, if you have any problems let me know so we can fix them.

I hope this helps. Happy coding!

Javascript multiple quotes CSS property output incorrect

1 Answers1