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

ですから、コードへの変更は何ですか？ –

答えの最初の段落で述べたこと。 –

答えて

関連する問題