i have several js functions doing the same thing width different values for different divs. Here is the HTML-code:
<input id="kunst_radio1" type="radio" name="kunstmuseum" value="0" checked="checked" onClick="animateKunst('null')"><label for="kunst_radio1"></label>
<input id="kunst_radio2" type="radio" name="kunstmuseum" value="6794200" onClick="animateKunst('halb')"><label for="kunst_radio2"></label>
<input id="kunst_radio3" type="radio" name="kunstmuseum" value="13588400" onClick="animateKunst('voll')"><label for="kunst_radio3"></label>
<input id="hist_radio1" type="radio" name="hist" checked="checked" onClick="animateHist('null')"><label for="hist_radio1"></label>
<input id="hist_radio2" type="radio" name="hist" onClick="animateHist('halb')"><label for="hist_radio2"></label>
<input id="hist_radio3" type="radio" name="hist" onClick="animateHist('voll')"><label for="hist_radio3"></label>
I have about 15 radio button groups and for each group I have to execute this function with different values:
function animateKunst(val) {
var div = $('#kunstmuseum');
if(div.data('originalWidth') == undefined)
div.data('originalWidth', div.width());
var width = div.data('originalWidth');
if (val=="voll")
width *= .6;
else if (val=="halb")
width *= .8;
$('#kunstmuseum').animate({width: width}, 500);
}
function animateHist(val) {
var div = $('#historisch');
if(div.data('originalWidth') == undefined)
div.data('originalWidth', div.width());
var width = div.data('originalWidth');
if (val=="voll")
width *= .7;
else if (val=="halb")
width *= .9;
$('#historisch').animate({width: width}, 500);
}
Can I put all the values in an array and then make a for-loop? How can I do that?
I would slightly modify the ids so that I can reuse them more easily inside my function and define a mapping for your widths.
<script type="text/javascript">
var mapping = {
kunst: {
voll: 0.6,
halb: 0.8
},
hist: {
voll: 0.7,
halb: 0.9
},
null: {
voll: 0,
halb: 0
}
};
function animate(type, val) {
var div = $('#' + type);
if ( !div.data('originalWidth') ) {
div.data('originalWidth', div.width());
}
var width = div.data('originalWidth');
width *= mapping[type][val];
div.animate({ width: width }, 500);
}
</script>
<input id="kunst_radio1" type="radio" name="kunst" value="0" checked="checked"
onClick="animate('kunst', 'null')">
<label for="kunst_radio1"></label>
<input id="kunst_radio2" type="radio" name="kunst" value="6794200"
onClick="animate('kunst', 'halb')">
<label for="kunst_radio2"></label>
<input id="kunst_radio3" type="radio" name="kunst" value="13588400"
onClick="animate('kunst', 'voll')">
<label for="kunst_radio3"></label>
<input id="hist_radio1" type="radio" name="hist" checked="checked"
onClick="animate('hist', 'null')">
<label for="hist_radio1"></label>
<input id="hist_radio2" type="radio" name="hist"
onClick="animate('hist', 'halb')">
<label for="hist_radio2"></label>
<input id="hist_radio3" type="radio" name="hist"
onClick="animate('hist', 'voll')">
<label for="hist_radio3"></label>
Related
How can I make checkbox and radio inputs disabled per fieldset and then sequentially enabled after certain inputs are selected?
For example: Initially, all fieldsets but the first one are disabled.
After user selects input in the first fieldset, second one is enabled.
And so on and so forth.
Related to that, how can I display the calculated value only after radio input in the second fieldset is checked?
const calculator = document.querySelector("form");
const occasionPricing = {
party: 20,
birthday: 25,
anniversary: 50,
wedding: 100
}
const sizeIndexes = {
six: 1,
eight: 1.5,
ten: 2,
twelve: 2.5
}
const extrasPricing = {
candles: 5,
inscription: 10,
decoration: 25,
special: 50
}
function cakes() {
var cakes = Array.from(calculator.elements["cake"]).slice(0, 3);
var raphael = calculator.elements["raphael"];
function isChecked(checkbox) {
return checkbox.checked;
}
var count = cakes.filter(isChecked).length;
if (count) {
count = count * 0.5 + 0.5;
if (raphael.checked) {
count += 1;
}
return count;
}
return 0;
}
function occasion() {
var occasionCost = 0;
var occasion = calculator.elements["occasion"];
for (var i = 0; i < occasion.length; i++) {
if (occasion[i].checked) {
occasionCost = occasionPricing[occasion[i].value];
break;
}
}
return occasionCost;
}
function size() {
var sizeIndex = 1;
var size = calculator.elements["size"];
for (var i = 0; i < size.length; i++) {
if (size[i].checked) {
sizeIndex = sizeIndexes[size[i].value];
break;
}
}
return sizeIndex;
}
function extras() {
var extrasCost = 0;
const extras = calculator.elements["extras"];
for (var i = 0; i < extras.length; i++) {
if (extras[i].checked) {
extrasCost = extrasCost + extrasPricing[extras[i].value];
}
}
return extrasCost;
}
function calculateTotal() {
var totalCost = cakes() * occasion() * size() + extras();
calculator.total.value = "$" + totalCost;
}
<form>
<fieldset>
<legend>Select Cakes</legend>
<label><input type="checkbox" name="cake" id="leonardo" onclick="calculateTotal()">Leonardo</label>
<label><input type="checkbox" name="cake" id="donatello" onclick="calculateTotal()">Donatello</label>
<label><input type="checkbox" name="cake" id="michelangelo" onclick="calculateTotal()">Michelangelo</label>
<label><input type="checkbox" name="cake" id="raphael" onclick="calculateTotal()">Raphael</label>
<p>If you select more than one cake, the other cakes are discounted 50%.</p>
<p><small>Does not apply to Raphael.</small></p>
</fieldset>
<fieldset>
<legend>Choose Occasion</legend>
<label><input type="radio" name="occasion" value="party" onclick="calculateTotal()" required>Party</label><br>
<label><input type="radio" name="occasion" value="birthday" onclick="calculateTotal()">Birthday</label><br>
<label><input type="radio" name="occasion" value="anniversary" onclick="calculateTotal()">Anniversary</label><br>
<label><input type="radio" name="occasion" value="wedding" onclick="calculateTotal()">Wedding</label><br>
</fieldset>
<fieldset>
<legend>Choose Size</legend>
<label><input type="radio" name="size" value="six" onclick="calculateTotal()" required>6-inch</label><br>
<label><input type="radio" name="size" value="eight" onclick="calculateTotal()">8-inch</label><br>
<label><input type="radio" name="size" value="ten" onclick="calculateTotal()">10-inch</label><br>
<label><input type="radio" name="size" value="twelve" onclick="calculateTotal()">12-inch</label><br>
</fieldset>
<fieldset>
<legend>Select Extras</legend>
<label><input type="checkbox" name="extras" value="candles" onclick="calculateTotal()">Candles</label>
<label><input type="checkbox" name="extras" value="inscription" onclick="calculateTotal()">Inscription</label>
<label><input type="checkbox" name="extras" value="decoration" onclick="calculateTotal()">Decoration</label>
<label><input type="checkbox" name="extras" value="special" onclick="calculateTotal()">Special Frosting & Icing</label>
</fieldset>
<input type="text" name="total">
<input type="submit" value="Submit" onclick="calculateTotal()">
Create an onchange event listener on fieldset and trigger a function that would enable the next fieldset. Check out the working snippet
const calculator = document.querySelector("form");
const occasionPricing = {
party: 20,
birthday: 25,
anniversary: 50,
wedding: 100
}
const sizeIndexes = {
six: 1,
eight: 1.5,
ten: 2,
twelve: 2.5
}
const extrasPricing = {
candles: 5,
inscription: 10,
decoration: 25,
special: 50
}
function cakes() {
var cakes = Array.from(calculator.elements["cake"]).slice(0, 3);
var raphael = calculator.elements["raphael"];
function isChecked(checkbox) {
return checkbox.checked;
}
var count = cakes.filter(isChecked).length;
if (count) {
count = count * 0.5 + 0.5;
if (raphael.checked) {
count += 1;
}
return count;
}
return 0;
}
function occasion() {
var occasionCost = 0;
var occasion = calculator.elements["occasion"];
for (var i = 0; i < occasion.length; i++) {
if (occasion[i].checked) {
occasionCost = occasionPricing[occasion[i].value];
break;
}
}
return occasionCost;
}
function size() {
var sizeIndex = 1;
var size = calculator.elements["size"];
for (var i = 0; i < size.length; i++) {
if (size[i].checked) {
sizeIndex = sizeIndexes[size[i].value];
break;
}
}
return sizeIndex;
}
function extras() {
var extrasCost = 0;
const extras = calculator.elements["extras"];
for (var i = 0; i < extras.length; i++) {
if (extras[i].checked) {
extrasCost = extrasCost + extrasPricing[extras[i].value];
}
}
return extrasCost;
}
function calculateTotal() {
var totalCost = cakes() * occasion() * size() + extras();
calculator.total.value = "$" + totalCost;
}
function enableFieldset(element, event) {
if (event.currentTarget.id == 'cakes') {
var checked = false;
var checkboxes = document.getElementsByName("cake");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checked = true;
break;
}
}
if (checked) {
document.getElementById(element).disabled = false;
} else {
document.getElementById(element).disabled = true;
}
} else {
document.getElementById(element).disabled = false;
}
}
<form>
<fieldset id="cakes" onchange="enableFieldset('occasion',event)">
<legend>Select Cakes</legend>
<label><input type="checkbox" name="cake" id="leonardo">Leonardo</label>
<label><input type="checkbox" name="cake" id="donatello">Donatello</label>
<label><input type="checkbox" name="cake" id="michelangelo">Michelangelo</label>
<label><input type="checkbox" name="cake" id="raphael">Raphael</label>
<p>If you select more than one cake, the other cakes are discounted 50%.</p>
<p><small>Does not apply to Raphael.</small></p>
</fieldset>
<fieldset id="occasion" onchange="enableFieldset('size', event)" disabled>
<legend>Choose Occasion</legend>
<label><input type="radio" name="occasion" value="party" onclick="calculateTotal()" required>Party</label><br>
<label><input type="radio" name="occasion" value="birthday" onclick="calculateTotal()">Birthday</label><br>
<label><input type="radio" name="occasion" value="anniversary" onclick="calculateTotal()">Anniversary</label><br>
<label><input type="radio" name="occasion" value="wedding" onclick="calculateTotal()">Wedding</label><br>
</fieldset>
<fieldset id="size" onchange="enableFieldset('extras', event)" disabled>
<legend>Choose Size</legend>
<label><input type="radio" name="size" value="six" onclick="calculateTotal()" required>6-inch</label><br>
<label><input type="radio" name="size" value="eight" onclick="calculateTotal()">8-inch</label><br>
<label><input type="radio" name="size" value="ten" onclick="calculateTotal()">10-inch</label><br>
<label><input type="radio" name="size" value="twelve" onclick="calculateTotal()">12-inch</label><br>
</fieldset>
<fieldset id="extras" disabled>
<legend>Select Extras</legend>
<label><input type="checkbox" name="extras" value="candles" onclick="calculateTotal()">Candles</label>
<label><input type="checkbox" name="extras" value="inscription" onclick="calculateTotal()">Inscription</label>
<label><input type="checkbox" name="extras" value="decoration" onclick="calculateTotal()">Decoration</label>
<label><input type="checkbox" name="extras" value="special" onclick="calculateTotal()">Special Frosting & Icing</label>
</fieldset>
<input type="text" name="total">
<input type="submit" value="Submit" onclick="calculateTotal()">
I have this progress bar working. The only thing I am having issues with is changing the color when as many of the check boxes are checked...
0-3 background = red
4-7 = yellow
8-10 = Green
My CSS
.progress-bar-wrapper .progress-bar-filling {
height: 100%;
color: #fff;
text-align: right;
width: 0;
background-color: #39b54a;
border-radius:20px;
}
.progress-bar-wrapper .progress-bar-percent {
font-weight: 400;
font-family: sans-serif;
color: #626162;
padding-top: 6px;
display: block;
}
My HTML / Javascript
<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div>
<script>
window.onload = xxx;
function xxx()
{
var zzz = $(".check_id:checked").length;
document.getElementById("insert").innerHTML = zzz
$(document).ready(function(){
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300)
The jFiddle is here Jfiddle
Thanks
You can just check the no. of checked checkboxes via $(".check_id:checked").length and change just the background-color css property.
<div id="yyy">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()">
<input type="checkbox" class="check_id" onclick="xxx()" checked>
<input type="checkbox" class="check_id" onclick="xxx()">
<div>
<script>
window.onload = xxx;
function xxx()
{
var zzz = $(".check_id:checked").length;
document.getElementById("insert").innerHTML = zzz
$(document).ready(function(){
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('.progress-bar-filling').animate({ width: progressBarWidth }, 300)
//.html(percent + "% ");
$('.progress-bar-percent').html( percent + "% " );
// calculate color
if($(".check_id:checked").length <= 3)
{
$("#progress-bar-filling").css("background-color","red");
}
else if($(".check_id:checked").length >= 4 && $(".check_id:checked").length <= 7 )
{
$("#progress-bar-filling").css("background-color","yellow");
}
else if($(".check_id:checked").length >= 8 && $(".check_id:checked").length <= 10 )
{
$("#progress-bar-filling").css("background-color","green");
}
}
var complete = zzz+'0';
progress(complete, $('#progress-bar'));
})
}
</script>
<p id="insert"></p>
<div class="progress-bar-wrapper">
<div id="progress-bar">
<div id="progress-bar-filling" class="progress-bar-filling"></div>
</div>
<div class="progress-bar-percent"></div>
</div>
Example : https://jsfiddle.net/tLq07L77/1/
Since you already know the number of :checked checkboxers you can add 3 new classes (in your css) to set the background-color of your progress-bar:
.progress-bar-wrapper .progress-bar-filling.fill0 {
background-color: red;
}
.progress-bar-wrapper .progress-bar-filling.fill1 {
background-color: yellow;
}
.progress-bar-wrapper .progress-bar-filling.fill2 {
background-color: #39b54a;
}
Inside your javascript code - first - remove all the fill0,fill1,fill2 classes, and then - based on the number you have - add only the relevant class:
$('.progress-bar-filling').removeClass('fill0 fill1 fill2');
if (zzz <= 3) {
$('.progress-bar-filling').addClass('fill0')
} else if (zzz <= 7) {
$('.progress-bar-filling').addClass('fill1')
} else {
$('.progress-bar-filling').addClass('fill2')
}
Here is a working example:
https://jsfiddle.net/g4Lhvawq/
My question today is to ask why when i switch radio buttons, drawing a circle doesn't work. Im creating a paint program. Please help me with this question.
Html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="200"></canvas>
<h2>Choose your drawing shape:</h2>
<p>
<input type="radio" name="shape" onclick="square=true;" checked="checked">Square
<input type="radio" name="shape" onclick="square=false;">Circle
</p>
<h2>Color Settings:</h2>
<input type="color" id="myColor" />
<form id="colorForm">
<h3>Basic Colours:</h3>
<p>
<input type="radio" name="color" value="black" checked="checked" />Black
<input type="radio" name="color" value="red" />Red
<input type="radio" name="color" value="orange" />Orange
<input type="radio" name="color" value="yellow" />Yellow
<input type="radio" name="color" value="green" />Green
<input type="radio" name="color" value="blue" />Blue
<input type="radio" name="color" value="purple" />Purple
<input type="radio" name="color" value="white" />Eraser (White)
</p>
</form>
<form id="sizeForm">
<h2>Size:</h2>
<p>
<input type="radio" name="size" value="10" />Big
<input type="radio" name="size" value="5" checked="checked" />Normal
<input type="radio" name="size" value="2" />Small
</p>
</form>
<button onclick="clearCanvas()">Clear Drawing</button>
Css:
#canvas {
border: 1px solid black;
cursor: crosshair;
}
h2,
h3 {
margin-bottom: 0;
}
h2 {
font-size: 1.1rem;
}
h3 {
font-size: 1rem;
}
And javascript:
var square = true; // Set
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5
var eraserSize = 5;
$('#colorForm input, #myColor').on('change', function() {
ctx.fillStyle = $(this).val();
});
$('#sizeForm input').on('change', function() {
size = $(this).val();
});
var drawRect = function (event) {
var posX = event.pageX - $(canvas).offset().left - 4
var posY = event.pageY - $(canvas).offset().top - 4
ctx.fillRect(posX, posY, size, size)
}
var drawCircle = function (event) {
var posX = event.pageX - $(canvas).offset().left
var posY = event.pageY - $(canvas).offset().top
ctx.beginPath();
ctx.arc(posX, posY, size - 1, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}
function mouseDown(e) {
// We only care about mousemove on the canvas, not the whole page
if (square) {
$(canvas).on('mousemove', drawRect).on('mouseup', drawRect);
} else {
$(canvas).on('mousemove', drawCircle).on('mouseup', drawCircle);
}
// If the user mouseup outside of the canvas, we don't want to keep listening, so listen for mouseup on the whole page to remove our other drawing listeners
$('html').one('mouseup', function() { // "one" means that it will only fire once and will stop listening after that (cleanup for free)
$(canvas).off('mousemove').off('mouseup');
});
}
function clearCanvas() {
if (confirm("Are you sure you want to clear your drawing?") == true) {
ctx.clearRect(0, 0, 300, 300)
}
}
// We only care about mousedown on the canvas, not the whole page
$(canvas).on('mousedown', mouseDown);
Please help me with this question. Thanks for your support!!!
my question today is to ask why when I switch radio buttons, drawing a circle and drawing a square don't work. This is for my paint program im creating. Please help me with this question. Also can you help why the program is so laggy? XD. The code is down here:
var square = true
function myFunction() {
var x = document.getElementById("myColor").value;
ctx.fillStyle = x;
};
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5
var eraserSize = 5;
$('#colorForm input').on('change', function() {
ctx.fillStyle = $(this).val();
});
$('#sizeForm input').on('change', function() {
size = $(this).val();
});
function drawRect(event) {
var posX = event.pageX - $("#canvas").offset().left - 4
var posY = event.pageY - $("#canvas").offset().top - 4
ctx.fillRect(posX, posY, size, size)
}
function drawCircle(event) {
var posX = event.pageX - $("#canvas").offset().left
var posY = event.pageY - $("#canvas").offset().top
ctx.beginPath();
ctx.arc(posX, posY, size - 1, 0, Math.PI / 2, false);
ctx.closePath();
ctx.fill();
}
function check() {
if (square === true) {
$("html").mousedown(function() {
$("html").mousemove(function(event) {
drawRect(event);
})
$("html").click(function(event) {
drawRect(event);
})
})
$("html").mouseup(function() {
$("html").off("mousemove")
})
}
if (square === false) {
$("html").mousedown(function() {
$("html").mousemove(function(event) {
drawCircle(event);
})
$("html").click(function(event) {
drawCircle(event);
})
})
$("html").mouseup(function() {
$("html").off("mousemove")
})
}
}
function clearCanvas() {
if (confirm("Are you sure you want to clear your drawing?") == true) {
ctx.clearRect(0, 0, 800, 800)
}
}
setInterval(function() {
check();
}, 1)
#canvas {
border: 1px solid black
}
<p id="demo"></p>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<canvas id="canvas" width="800" height="800" style="cursor:crosshair"></canvas>
<br />
<STRONG>Choose your drawing shape</STRONG>:
<input type="radio" name="shape" onclick="square = true" checked="checked">Square
<input type="radio" name="shape" onclick="square = false">Circle
<br />
<STRONG>Color Settings</STRONG>:
<input type="color" id="myColor">
<button onclick="myFunction()">OK</button>
<br />Basic Colours:
<br />
<form id="colorForm">
<input type="radio" name="color" value="black" checked="checked">Black
<input type="radio" name="color" value="red">Red
<input type="radio" name="color" value="orange">Orange
<input type="radio" name="color" value="yellow">Yellow
<input type="radio" name="color" value="green">Green
<input type="radio" name="color" value="blue">Blue
<input type="radio" name="color" value="purple">Purple
<input type="radio" name="color" value="white">Eraser (White)
</form>
<form id="sizeForm">
<br />
<STRONG>Size</STRONG>:
<input type="radio" name="size" value="10">Big
<input type="radio" name="size" value="5" checked="checked">Normal
<input type="radio" name="size" value="2">Small
</form>
<br />
<button onclick="clearCanvas()">Clear Drawing</button>
.arc() takes radians - 2π is a full circle, you are doing π/2 which is 90 degrees. Here's an easy converter: http://www.rapidtables.com/convert/number/radians-to-degrees.htm.
I adjusted your code below, you were not cleaning up the onmousedown listener. The click listener is actually unnecessary, if a mouseup is used instead (since you're already mousedown, you have half of the click already). The setInterval was unnecessary; you can listen for mousedown to start drawing. Limiting the scope of the listeners to the canvas vs. all of the HTML can improve performance also.
var square = true; // Set
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 5
var eraserSize = 5;
$('#colorForm input, #myColor').on('change', function() {
ctx.fillStyle = $(this).val();
});
$('#sizeForm input').on('change', function() {
size = $(this).val();
});
function drawRect(event) {
var posX = event.pageX - $(canvas).offset().left - 4
var posY = event.pageY - $(canvas).offset().top - 4
ctx.fillRect(posX, posY, size, size)
}
function drawCircle(event) {
var posX = event.pageX - $(canvas).offset().left
var posY = event.pageY - $(canvas).offset().top
ctx.beginPath();
ctx.arc(posX, posY, size - 1, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}
function mouseDown(e) {
// We only care about mousemove on the canvas, not the whole page
if (square) {
$(canvas).on('mousemove', drawRect).on('mouseup', drawRect);
} else {
$(canvas).on('mousemove', drawCircle).on('mouseup', drawCircle);
}
// If the user mouseup outside of the canvas, we don't want to keep listening, so listen for mouseup on the whole page to remove our other drawing listeners
$('html').one('mouseup', function() { // "one" means that it will only fire once and will stop listening after that (cleanup for free)
$(canvas).off('mousemove').off('mouseup');
});
}
function clearCanvas() {
if (confirm("Are you sure you want to clear your drawing?") == true) {
ctx.clearRect(0, 0, 800, 800)
}
}
// We only care about mousedown on the canvas, not the whole page
$(canvas).on('mousedown', mouseDown);
#canvas {
border: 1px solid black;
cursor: crosshair;
}
h2,
h3 {
margin-bottom: 0;
}
h2 {
font-size: 1.1rem;
}
h3 {
font-size: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="200"></canvas>
<h2>Choose your drawing shape:</h2>
<p>
<input type="radio" name="shape" onclick="square=true;" checked="checked">Square
<input type="radio" name="shape" onclick="square=false;">Circle
</p>
<h2>Color Settings:</h2>
<input type="color" id="myColor" />
<form id="colorForm">
<h3>Basic Colours:</h3>
<p>
<input type="radio" name="color" value="black" checked="checked" />Black
<input type="radio" name="color" value="red" />Red
<input type="radio" name="color" value="orange" />Orange
<input type="radio" name="color" value="yellow" />Yellow
<input type="radio" name="color" value="green" />Green
<input type="radio" name="color" value="blue" />Blue
<input type="radio" name="color" value="purple" />Purple
<input type="radio" name="color" value="white" />Eraser (White)
</p>
</form>
<form id="sizeForm">
<h2>Size:</h2>
<p>
<input type="radio" name="size" value="10" />Big
<input type="radio" name="size" value="5" checked="checked" />Normal
<input type="radio" name="size" value="2" />Small
</p>
</form>
<br />
<button onclick="clearCanvas()">Clear Drawing</button>
First of all, your code is missing a ton of semi-colons at the end of lines, which is VERY bad practice in general. I'd say your first line of action is to fill those in to make sure missing semi-colons is causing the issue.
Second, when you are changing the square variable, it is first assigning the onmousedown handler to use the drawRect method. However, when you select circle and square becomes false, you are then assigning the onmousedown handler to use the drawCircle method without unbinding the previous onmousedown handler. With jQuery, assigning a handler again does not overwrite the previous handler.
Another issue I see with this is that the circle is not being drawn correctly in the first place. If you set square=false initially and try to draw a circle, it is only drawing a semi-circle, so check your drawCircle.
So I'm having an issue. I have to design a css button that can be customized by a user on the fly, with a few customization options. They have to be able to add text, change the button colour, change the button size and change how round the borders are. The thing is, my javascript functions to change the borders and the size of the button aren't working. They also make the other functions not work, oddly enough.
I was told to avoid using jQuery.
The Javascript for the size changing function:
function aBc()
{
var a = document.getElementById("buttontest");
if(document.getElementById("smallS").checked)
{
a.style.width = 100px;
}
else if(document.getElementById("mediumS").checked)
{
a.style.width = 150px;
}
else if(document.getElementById("largeS").checked)
{
a.style.width = 200px;
}
else if(document.getElementById("hugeS").checked)
{
a.style.width = 300px;
}
}
The Javascript for the border changing function:
function changeCorners()
{
var bordertest;
bordertest = document.getElementById("buttontest");
if (document.getElementById("none").checked)
{
bordertest.style.borderRadius = 0px;
}
else if (document.getElementById("small").checked)
{
bordertest.style.borderRadius = 10px;
}
else if (document.getElementById("medium").checked)
{
bordertest.style.borderRadius = 20px;
}
else if (document.getElementById("large").checked)
{
bordertest.style.borderRadius = 30px;
}
else if (document.getElementById("total").checked)
{
bordertest.style.borderRadius = 40px;
}
}
The HTML for everything:
Button Text: <input type="text" onkeydown="changeText(event)" id="bText"><br />
Text Color: <input type="color" id="tColor" name="tColor" value="#3e3e3e" oninput="changeTextColor(tColor.value)"><br />
How Round: <input type="radio" name="roundness" id="none" checked="checked" onchange=changeCorners()>
<label for="none">Square</label>
<input type="radio" name="roundness" id="small" onchange=changeCorners()>
<label for="small">Small Roundness</label>
<input type="radio" name="roundness" id="medium" onchange=changeCorners()>
<label for="medium">Medium Roundness</label>
<input type="radio" name="roundness" id="large" onchange=changeCorners()>
<label for="large">Large Roundness</label>
<input type="radio" name="roundness" id="total" onchange=changeCorners()>
<label for="total">Completely Round</label><br />
Background Color: <input type="color" id="backColor" name="backColor" value="#dddddd" oninput="changeBgColor(backColor.value)"><br />
Shadow Color: <input type="color" id="shadColor" name="shadColor" value="#888888" oninput="changeShadColor(shadColor.value)"><br />
Button Size: <input type="radio" name="size" id="smallS" checked="checked" onchange=aBc()>
<label for="smallS">Small</label>
<input type="radio" name="size" id="mediumS" onchange=aBc()>
<label for="mediumS">Medium</label>
<input type="radio" name="size" id="largeS" onchange=aBc()>
<label for="largeS">Large</label>
<input type="radio" name="size" id="hugeS" onchange=aBc()>
<label for="hugeS">Extra Large</label><br />
<p><input type="button" value="" class="test1" id="buttontest"></p>
You need to quote your property values.
Things like a.style.width = 100px; should be a.style.width = "100px";