How to empty() on click with jquery - javascript

I need to empty an h2 element when a button is clicked. I do this in part of my code already and it works fine, but when I try to empty this part of my code it doesn't work. I can't figure out why.
JSFiddle link here
$('#help').click(function() {
$('#intro').empty();
$('#intro').text("News:");
$('#help').hide();
$('#noHelp').hide();
$('#news').text("Battle system created");
});
This part is breaking it and I don't know why
var fly = new Monster("fly", 1, 1, 5, 2, 1, 1);
var mouse = new Monster("mouse", 2, 3, 10, 2, 1, 2);
var rat = new Monster("rat", 4, 5, 20, 4, 2, 2);
var rabidChihuahua = new Monster("chihuahua", 6, 8, 35, 6, 1, 4);
var bulldog = new Monster("bulldog", 10, 14, 60, 10, 4, 1);
var wolf = new Monster("Wolf", 15, 18, 65, 12, 3, 6);
var vampie = new Monster("Vampire", 20, 23, 100, 12, 5, 4);
var werewolf = new Monster("Werewolf", 25, 29, 100, 14, 3, 9);
var giantSlime = new Monster("Giant Slime", 31, 38, 200, 7, 15, 1);
var babyDragon = new Monster("Baby Dragon", 39, 50, 150, 16, 9, 5);
var orc = new Monster("Orc", 50, 64, 220, 10, 12, 4);
var succubi = new Monster("Succubi", 61, 80, 190, 21, 8, 12);
var elderDragon = new Monster("Elder Dragon", 75, 100, 300, 21, 15, 8);
var sanaan = new Monster("Sanaan", 150, 500, 500, 55, 45, 30);

I've updated your fiddle :
see here
I've changed this line to test the opt var :
if(opt.length > 0){
monsterList.appendChild(opt); // appending option to select element
}

Related

How to consecutively add values from one array to another and store the value in a new array in javascript?

I have 2 arrays:
const initialAmount = [50]
const transactionAmounts = [ -10, 10, 10, -1, -5, -10, 5, 5, 5, 10, 10, 10, 1, -1, -2, -5, -10 ]
How do i return an array that adds each value from transactionAmounts to the initialAmount? (excluding the first, which should be the initial value)
For example, it should return:
const valueAfterEachTransaction = [50, 40, 50, 60, 59, 54, 44, 49, 54, 59, 69, 79, 89, 90, 89, 87, 82, 72]
You could take a closure over the sum and get all elememts of both arrays for mapping the acutal sum.
const
initial = [50],
transactions = [-10, 10, 10, -1, -5, -10, 5, 5, 5, 10, 10, 10, 1, -1, -2, -5, -10],
result = [...initial, ...transactions].map((s => v => s += v)(0));
console.log(...result);
const initialAmount = [50]
const transactionAmounts = [ -10, 10, 10, -1, -5, -10, 5, 5, 5, 10, 10, 10, 1, -1, -2, -5, -10 ]
const newArray = [initialAmount[0]]
let value = initialAmount[0]
let i = 0
do {
value = value + transactionAmounts[i]
newArray[i+1] = value
i++;
}
while (i < transactionAmounts.length);
console.log(newArray)
const initialAmount = [50]
const transactionAmounts = [ -10, 10, 10, -1, -5, -10, 5, 5, 5, 10, 10, 10, 1, -1, -2, -5, -10 ]
const newArray = [initialAmount[0]]
let value = initialAmount[0]
let i = 0
do {
value = value + transactionAmounts[i]
newArray[i+1] = value
i++;
}
while (i < transactionAmounts.length);
console.log(newArray)
Maybe I'm missing something here, but this seems to be a straightforward map, after you handle the missing initial value.
const combine = ([x], ys) => [0, ...ys] .map (y => x + y)
const initialAmount = [50]
const transactionAmounts = [-10, 10, 10, -1, -5, -10, 5, 5, 5, 10, 10, 10, 1, -1, -2, -5, -10]
console .log (combine (initialAmount, transactionAmounts))
.as-console-wrapper {max-height: 100% !important; top: 0}
I'm curious of what your underlying need is. This seems an odd requirement. Why is the initial value passed in an array? Why is there an implied 0 to add to the first one. Is this an XY problem?

problem in comparing element of two array and if element matches then modifies another array value with some condition

I want to compare x and z and if element in x is present in z then push element of y in temp else push 0 in temp at the end length of z and temp should be equal.
below is my code ---
var x=[00,03,06,21]
var y=[79,11,18,14]
var temp=[]
var z=[00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
for(var i=0;i<z.length;i++){
for(j=0;j<x.length;j++){
if(z[i]==x[j]){
// alert("hello")
temp.push(y[j])
}
}
if(z[i]!=x[j]){
temp.push(0)
}
}
console.log(temp)
console.log(z)
i getting the output as -
//temp (29) [79, 0, 0, 0, 11, 0, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0, 0]
//z (25) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
expected output --
//temp (25) [79, 0, 0, 11, 0, 0, 18, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0]
//z (25) [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
24]
Once you found a common value, you need to continue the outer loop. If not found, push after finishing the inner loop.
BTW, do not forget to declare all variables.
var x = [0, 3, 6, 21],
y = [79, 11, 18, 14],
temp = [],
z = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
outer: for (let i = 0; i < z.length; i++) {
for (let j = 0; j < x.length; j++) {
if (z[i] === x[j]) {
temp.push(y[j]);
continue outer;
}
}
temp.push(0);
}
console.log(temp);
console.log(z);
A version without a label.
var x = [0, 3, 6, 21],
y = [79, 11, 18, 14],
temp = [],
z = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
for (let i = 0; i < z.length; i++) {
let value = 0;
for (let j = 0; j < x.length; j++) {
if (z[i] === x[j]) {
value = y[j];
break;
}
}
temp.push(value);
}
console.log(temp);
console.log(z);
Finally, a shorter approach with an object for the replacement values.
var x = [0, 3, 6, 21],
y = [79, 11, 18, 14],
z = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
values = x.reduce((r, k, i) => (r[k] = y[i], r), {}),
temp = z.map(k => values[k] || 0);
console.log(temp);
console.log(z);

How to find the Minimum number of swaps required for sorting an array of numbers in descending order in javascript

I'm trying to get my code to do this:
Original array = [1,2,3,4] swap once-> [4,2,3,1] swap again->[4,3,2,1]
Therefore result is 2
But it's not working. Here's what I have so far:
function check(arr){
var sarr = [];
var cnt = 0;
var arrL = arr.length;
// Create a second copy of the array for reference
var arrCopy = [...arr];
for(let i=0; i<arrL;i++){
var maxV = Math.max(...arr);
sarr.push(maxV);
let pos = arr.indexOf(maxV);
// Remove the found number
arr.splice(pos,1);
// Check if the index of the number in the new array is same with the copy, if not then there was a swap
let ai =arrCopy.indexOf(maxV);
let si =sarr.indexOf(maxV);
if (ai !== si && (i+1)!=arrL && pos !== 0){
cnt++;
};
}
console.log(cnt);
}
check([1, 2, 3, 4, 5, 6]);//Result should be 3
check([6,5,4,3,2,1]); //result should be 0
check([1,2,3,4]); //result should be 2
check([1,3,2,5,4,6]); //result should be 3
check([1,2,10,4,5,6,7,8,9,3,12,11]);//result should be 6
check([ 49, 37, 9, 19, 27, 3, 25, 11, 53,  42, 57, 50, 55,  56, 38, 48, 6, 33, 28, 8, 20, 31, 51, 14, 23, 4, 58, 52, 36, 22, 41, 47, 39, 2, 7, 13, 45, 1, 44, 32, 10, 15, 21, 30, 17,  60, 29, 5, 59, 12, 40, 24, 54, 46, 26, 43, 35, 34, 18, 16]);//result should be 54
Can someone please let me know what I'm doing wrong?
I would start with a copy of the array in descending order for getting the right index of the items.
For practical reasons, (or just a shorter conception of the loop with including check and decrement), I loop from the end of the array.
Then I check the value of array and reversed at the dame index and go on with the iteration.
If not the same value, the items at the wanted position i and the actual position p are swapped and the count incremented.
At the end the count is returned.
function check(array) {
var reversed = array.slice().sort((a, b) => b - a),
count = 0,
i = array.length,
p;
while (i--) {
if (array[i] === reversed[i]) continue;
p = array.indexOf(reversed[i]);
[array[i], array[p]] = [array[p], array[i]];
count++;
}
console.log(...array);
return count;
}
console.log(check([1, 2, 3, 4, 5, 6])); // 3
console.log(check([6, 5, 4, 3, 2, 1])); // 0
console.log(check([1, 2, 3, 4])); // 2
console.log(check([1, 3, 2, 5, 4, 6])); // 3
console.log(check([1, 2, 10, 4, 5, 6, 7, 8, 9, 3, 12, 11])); // 6
console.log(check([ 49, 37, 9, 19, 27, 3, 25, 11, 53,  42, 57, 50, 55,  56, 38, 48, 6, 33, 28, 8, 20, 31, 51, 14, 23, 4, 58, 52, 36, 22, 41, 47, 39, 2, 7, 13, 45, 1, 44, 32, 10, 15, 21, 30, 17,  60, 29, 5, 59, 12, 40, 24, 54, 46, 26, 43, 35, 34, 18, 16])); // 54
.as-console-wrapper { max-height: 100% !important; top: 0; }
function minimumSwaps(arr) {
var count = 0;
arr.sort((a, b) => {
if (a < b) {
count++;
}
});
return count;
}
console.log(minimumSwaps([1, 2, 3, 4, 7, 6, 5]));

Javascript: Spliting an array into sections

I have an array that can be of any length. and need to split it into sections. The first section will be a length of 14, and there after a length of 16
var size1 = 14;
var size2 = 16;
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40];
var arrays = [];
if (a.length > 14){
for (i = 0; i < 14; i++) {
arrays.push(a.splice(0, size1));
}
for (i = 14 ; i < a.length; i++){
arrays.push(a.splice(0, size2));
}
} else {
arrays.push(a.splice(0, size1));
}
console.log(arrays);
However based on what I am doing my array keeps splitting only at 14. Can you advice on how I can do this?
Thank you
The solution using Array.prototype.slice() function:
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
size1 = 14,
size2 = 16,
arrays = [];
[0, size1, size2].forEach(function (v, i, arr) {
arrays.push((arr[i+1])? a.slice(v, v + arr[i+1]) : a.slice(arr[i-1] + v));
});
console.log(arrays);
You could use an array for the chunk length and a zero for the rest and map the chunks by keeping the length of the previous lengths.
It works for an arbitrary count of chunks.
var chunks = [14, 16, 0],
array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
result = chunks.map((last => a => array.slice(last, a ? (last += a) : undefined))(0));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
Edit: so, like this then?
var size1 = 14;
var size2 = 16;
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40];
var head = a.slice(0, size1);
var arrays = [head];
while (size1 < a.length){
arrays.push(a.slice(size1, Math.min(size1+size2, a.length)));
size1 += size2;
}
console.log(arrays)
You can try this with all dynamic array sizes, it will get you desired output.
Hope you were looking for this solution.
var size1 = 14;
var size2 = 16;
var flag=0;
var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40];
var arrays = [];
var t=a.length/14;
while(a.length>0){
if (flag==0 && a.length > 14){
arrays.push(a.splice(0, size1));
flag=1;
} else if(a.length>=16){
arrays.push(a.splice(0, size2));
}
else{
arrays.push(a.splice(0, a.length));
}
}
console.log(arrays)

Google Timeline memory-leak when redrawing chart

Here is the chart https://jsfiddle.net/damiantt/t2skaegg/2/
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<input id="Draw" type="button" value="Draw" onclick="drawChart();" />
<div id="chart_div_container" style="overflow-x: auto;min-height:0%;">
<div id="chart_div" style="overflow: visible;min-height:0%;"></div>
</div>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['timeline', 'table']
});
var initWidth = $('#chart_div').innerWidth();
var colorMap;
function drawChart() {
$('#chart_div').off();
$('#chart_div').empty();
var data = google.visualization.arrayToDataTable([
['Maszyna', 'Kolor', {
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
}, 'Start Time', 'End Time'],
['one', 'pi1', 'brr',
new Date(2014, 10, 15, 12, 30, 0),
new Date(2014, 10, 15, 12, 30, 20)
],
['one', 'pu3', 'brr',
new Date(2014, 10, 15, 12, 30, 20),
new Date(2014, 10, 15, 12, 30, 45)
],
['one', 'pu3', 'brr',
new Date(2014, 10, 15, 12, 30, 45),
new Date(2014, 10, 15, 12, 30, 55)
],
['two', 'g2', 'brr1',
new Date(2014, 10, 15, 12, 30, 35),
new Date(2014, 10, 15, 12, 30, 55)
],
['two', 'pi1', 'brr2',
new Date(2014, 10, 15, 12, 30, 55),
new Date(2014, 10, 15, 14, 31, 55)
],
['three', 'pu3', 'brr',
new Date(2014, 10, 15, 12, 29, 30),
new Date(2014, 10, 15, 14, 30, 0)
],
['three', 'pi1', 'brr',
new Date(2014, 10, 15, 14, 30, 0),
new Date(2014, 10, 15, 14, 35, 0)
],
['three', 'g2', 'Zbrr',
new Date(2014, 10, 15, 14, 35, 0),
new Date(2014, 10, 15, 15, 25, 10)
],
['three', 'pu3', 'KR1',
new Date(2014, 10, 15, 15, 25, 10),
new Date(2014, 10, 15, 15, 26, 00)
],
['three', 'g2', 'KR2',
new Date(2014, 10, 15, 15, 26, 00),
new Date(2014, 10, 15, 15, 26, 45)
],
['three', 'pi1', 'KR3',
new Date(2014, 10, 15, 15, 26, 45),
new Date(2014, 10, 15, 15, 27, 15)
],
['three', 'pu3', 'brr',
new Date(2014, 10, 15, 15, 27, 15),
new Date(2014, 10, 15, 20, 30, 1)
],
['three', 'pi1', 'brr',
new Date(2014, 10, 15, 20, 30, 1),
new Date(2014, 10, 16, 10, 30, 10)
],
['three', 'pu3', 'brr',
new Date(2014, 10, 16, 10, 30, 10),
new Date(2014, 10, 16, 18, 30, 10)
],
]);
var colors = [];
colorMap = {
// should contain a map of category -> color for every category
pi1: '#e63b6f',
g2: '#19c362',
pu3: '#592df7',
c4: '#000000',
'000000': '#000000'
}
for (var i = 0; i < data.getNumberOfRows(); i++) {
colors.push(colorMap[data.getValue(i, 1)]);
}
var options = {
enableInteractivity: false,
height: 210,
width: initWidth,
colors: colors,
avoidOverlappingGridLines: false,
timeline: {
showBarLabels: false
},
hAxis: {
format: 'dd/MM\nHH:mm'
},
tooltip: {
isHtml: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
afterDraw(data, colors);
$(document).ready(function() {
var zoom = 1000;
var leftSpace = $('rect:first-child+path').position().left - $('#chart_div svg').position().left;
var svgOffset = $('#chart_div svg').offset().left;
var $chartDivCont = $('#chart_div_container');
var x, left, down;
$('#chart_div').on({
'mousemove': function(evt) {
if (down) {
var newX = evt.pageX;
$chartDivCont.scrollLeft(left - newX + x);
}
},
'mousedown': function(evt) {
$('html').css('cursor', 'col-resize');
evt.preventDefault();
down = true;
x = evt.pageX;
left = $chartDivCont.scrollLeft();
},
'mouseup': function() {
down = false;
$('html').css('cursor', 'auto');
},
'mousewheel DOMMouseScroll': function(evt) {
evt.preventDefault();
if (evt.originalEvent.wheelDelta > 0 || evt.originalEvent.detail < 0) {
if (options.width < 31000) {
options.width += zoom;
var prevScrollLeft = $chartDivCont.scrollLeft();
var prop = ($chartDivCont.scrollLeft() + evt.originalEvent.clientX - leftSpace - svgOffset) / ($('#chart_div svg').width() - leftSpace);
chart.draw(data, options);
afterDraw(data, colors);
$chartDivCont.scrollLeft(prevScrollLeft + (prop * 1000));
}
} else {
if (options.width >= initWidth + zoom) {
options.width -= zoom;
var prevScrollLeft = $chartDivCont.scrollLeft();
var prop = ($chartDivCont.scrollLeft() + evt.originalEvent.clientX - leftSpace - svgOffset) / ($('#chart_div svg').width() - leftSpace);
chart.draw(data, options);
afterDraw(data, colors);
$chartDivCont.scrollLeft(prevScrollLeft - (prop * 1000));
}
}
}
});
});
}
function afterDraw(data, colors) {
$rects = $('#chart_div svg > g:nth-child(5) > rect');
for (var i = 0; i < $rects.length; i++) {
$('#chart_div svg > g:nth-child(5) > rect:nth-child(' + (i + 1) + ')').css({
"fill": colors[i]
});
}
}
When i run it on Chrome, memory usage is ~75k. After Draw and max zoom in (zoom it by mouse scroll) memory meter shows 140k, then max zoom out - 180k memory usage, zoom in - 225k, zoom out - 265k.
Is any way to free memory after every draw()? I tried to delete HTML elements, to null variables, but nothing helps me

Categories