Создание фигур в SVG

Для моего назначения мы создаем блок SVG, и пользователь вводит число, и мы добавляем это число квадратов в блок svg в случайных позициях в блоке svg. Мой код не работает.Создание фигур в SVG

Вот мой HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8" /> 
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.0.js"></script> 
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script> 
<script src="logic.js"></script> 
<link rel="stylesheet" href="style.css" /> 
<title>Exercise 10</title> 
</head> 
<body> 
<h1>Exercise 10</h1> 

<div id="svg1"></div> 

<div class="form">Add how many? 
<input type="text" id="howmany" /> 
<button id="more">Add More</button></div> 

<div id="svg2"></div> 

<div class="form"> 
<button id="another">Add Another</button> 
</div> 

</body> 
</html>

Вот мой Javascript:

var num_squares, x, y; 
num_squares = $('#howmany').val() 
add_more = function() { 

    for (count = 0;count < num_squares;count += 1) 
    { 
     x = Math.random() * 180 
     y = Math.random() * 180 
     r = paper.rect(x, y, 20, 20) 
     filled = { 
      'fill': '#ddf' 
     } 
     r.attr(filled) 
    } 
} 

setup = function() { 
    paper = Raphael('svg1', 200, 200) 
    add_more() 
} 
jQuery(document).ready(setup)

Вот мой CSS:

#svg1 { 
    border: black; 
}

источник

2016-12-18 Johnny Sack

Вы инициализирует num_squares вне функции т.е. на нагрузке документа. Это до того, как кто-то набрал номер, поэтому num_squares всегда пуст, и поэтому ваш цикл ничего не делает. Вы также не вызываете add_more при нажатии кнопки.

add_more = function() { 
 

 
    var num_squares, x, y; 
 
    num_squares = $('#howmany').val(); 
 
    for (count = 0;count < num_squares;count += 1) 
 
    { 
 
     x = Math.random() * 180 
 
     y = Math.random() * 180 
 
     r = paper.rect(x, y, 20, 20) 
 
     filled = { 
 
      'fill': '#ddf' 
 
     } 
 
     r.attr(filled) 
 
    } 
 
} 
 

 
setup = function() { 
 
    paper = Raphael('svg1', 200, 200) 
 
} 
 
jQuery(document).ready(setup)

#svg1 { 
 
    border: black; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8" /> 
 
<script src="http://cmpt165.csil.sfu.ca/js/jquery-3.1.0.js"></script> 
 
<script src="http://cmpt165.csil.sfu.ca/js/raphael-2.1.4.js"></script> 
 
<script src="logic.js"></script> 
 
<link rel="stylesheet" href="style.css" /> 
 
<title>Exercise 10</title> 
 
</head> 
 
<body> 
 
<h1>Exercise 10</h1> 
 

 
<div id="svg1"></div> 
 

 
<div class="form">Add how many? 
 
<input type="text" id="howmany"> 
 
<button id="more" onclick="add_more()">Add More</button></div> 
 

 
<div id="svg2"></div> 
 

 
<div class="form"> 
 
<button id="another">Add Another</button> 
 
</div> 
 

 
</body> 
 
</html>

источник

2016-12-19 01:57:28

Итак, какие изменения, внесенные в код? –

То, что я сказал в первом абзаце ответа. –

ответ

Смежные вопросы