Javascript несколько кавычек Свойство свойства CSS неверно

Question

Я пытаюсь вывести массив div. Моя проблема здесь в цитатах в синтаксисе JS.

}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"; 

я потом иметь следующий из положить в исходном коде:

Котировки будут полностью выйти иначе и CSS разметка исчезает полностью.

<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> 

Мой предпочтительный результат будет выглядеть следующим образом:

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

Здесь вся функция:

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"; 

} 

Answer 1

Это создаст элемент с помощью createElement()

Если вы хотите применить одинаковые стили к каждому элементу t, дать элементу класс и стиль класса.

---

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

---

function build(){ 
 
//Use your existing values. I have added k & i for demo purposes 
 
\t var k="2"; 
 
\t 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>

Демонстрация помещается в вашу существующую функцию

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"; 
} 

Это должно работать для вас, если у вас есть какие-либо проблемы, дайте мне знать, так что мы можем их исправить.

Надеюсь, это поможет. Счастливое кодирование!