Working with JavaScript makes updating a div simple for me. I begin by displaying initial values for two divs in the image on the left. Upon clicking the test button, the values on the right change.
https://i.sstatic.net/UF0PZ.png
By clicking the test button, the counter increments by 1 and updates the div values as follows:
var ela = document.getElementById("a");
var elb = document.getElementById("b");
$("#" + ela.id).html("new value " + ela.id + " ");
$("#" + elb.id).html("new value " + elb.id + " ");
The next step involves rearranging the div order based on whether the counter is odd or even. In the case of an even counter, div 'a' (yellow) moves to the top, while div 'b' (grey) goes to the bottom. The order reverses for an odd counter.
To achieve this, I used small arrays to define the possible orders 'a,b' and 'b,a'. A helper function named 'order' determines which case should be chosen based on the counter's value (even or odd).
However, despite changing the div positions correctly, the text within the divs behaves unexpectedly. For instance, after the first click, the yellow div moving upwards from the bottom should display 'new value a', but instead shows 'new value b a', causing confusion.
Upon inspecting the divs in the console output, irregularities are observed. Meteor appears to be confused about the div ids, resulting in both divs sharing the same id, color, and being identified as both yellow and grey simultaneously.
https://i.sstatic.net/h8RjO.png
If anyone understands why this is happening and knows how to correct it, your insights would be greatly appreciated.
Although using helpers to update text content inside the divs could solve the issue, my ultimate aim is to develop a slider functionality using nouislider. Here is an example code snippet that demonstrates this:
var noUiSlider = require('nouislider');
var sliderHtmlElement = document.getElementById("a");
var options = {
start: [0, 100],
range: {
'min': [0],
'max': [100]
}
};
noUiSlider.create(sliderHtmlElement, options);
For reference, here is my complete test code:
<template name="MyTemplate">
{{x}}
<br>
<br>
{{#each order}}
<div class="{{label}}" id="{{label}}"
style="background-color: {{color}};">
start value {{label}}
</div>
<br>
{{/each}}
<button class="test">test</button>
</template>var order1;
var order2;
Template.MyTemplate.onCreated(function() {
Session.set("x", 5);
var or0 = [];
or0["label"] = "a";
or0["color"] = "yellow";
var or1 = [];
or1["label"] = "b";
or1["color"] = "grey";
order1 = [];
order1[0] = or0;
order1[1] = or1;
order2 = [];
order2[0] = or1;
order2[1] = or0;
});
Template.MyTemplate.events({
'click .test': function(event) {
var varx = Session.get("x") + 1;
Session.set("x", varx);
createSliders();
}
});
Template.MyTemplate.helpers({
x: function() {
return Session.get("x");
},
order: function() {
if (Session.get("x") % 2 === 0) {
return order1;
} else {
return order2;
}
}
});
function createSliders() {
var ela = document.getElementById("a");
var elb = document.getElementById("b");
console.log(ela);
console.log(elb);
$("#" + ela.id).html("new value " + ela.id + " ");
$("#" + elb.id).html("new value " + elb.id + " ");
}