We Keep Coding

Why does my code return </h2> when I set it to return as </input>?

I have a todo site with edit mode and view mode. Full code is at https://repl.it/#UCYT5040/Notekeeper, but this is the JS I am having an issue with.
let editMode = true;
let items = 1
function toggleEditMode() {
console.log(editMode)
if (editMode == true) {
editMode = false;
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<h1 id=\"itemTitle" + (i + 1) + "\">" + document.getElementById('itemTitle' + (i + 1)).value + "</h1>"
}
} else {
editMode = true
for (i = 0; i < items; i++) {
document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + "></input>"
}
}
}
This ends up with
`<div id="item1">
<input type="text" id="itemTitle1" value="New Note">
</h1>
</div>`,
but it should be
`<div id="item1">
<input type="text" id="itemTitle1" value="New Note"></input>.
</div>`.

These are void elements(<input>). This means they aren't designed to contain text or other elements, and as such do not need — and in fact, cannot have — a closing tag in HTML.
document.getElementById('item' + (i + 1)).innerHTML = "<input type=\"text\" id=\"itemTitle" + (i + 1) + "\" value=\"" + document.getElementById('itemTitle' + (i + 1)).innerHTML + "/>"

Transform + transition (rotate) an Image by x degrees

i have an arrow image, which i want to turn according to a degree value I get in javascript (g_drivers[i].heading) .
<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">
This is working fine. I get a degree value every 3 seconds or so and the image rotates by that value.
I would now like a smooth transition when the degree changes every 3 seconds or so.
The CSS must look something like this...
.dir_img {
transition: transform 2s;
}
For some reason the .dir_img class is not catching that transition.
I am adding elements in the following manner:
I am creating the HTML out of JavaScript variables:
var html = '<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">'
and then I append this like this:
document.getElementById('sidebar-scroll').innerHTML = html;
And this for some reason isn't working.
Here is the function, where I added Kosh Very's code, but it is still not working:
function displayDriversInSidebar() {
var countM = 0; //Moving
var countS = 0; //Standing
var countI = 0; //Inaktiv (no_signal = 1)
var countO = 0; //Offline (online = 0)
var activeCSS = '';
var status_img;
var dir_img;
var movingDrivers = '<tbody class="sidebar_header"><tr><td>In Bewegung<span id="moving_counter">0</span></td></tr></tbody><tbody>';
var standingDrivers = '<tbody class="sidebar_header"><tr><td>Steht <span id="standing_counter">0</span></td></tr></tbody><tbody>';
var inactiveDrivers = '<tbody class="sidebar_header"><tr><td>Inaktiv <span id="inactive_counter">0</span></td></tr></tbody><tbody>';
var offlineDrivers = '<tbody class="sidebar_header"><tr><td>Offline <span id="offline_counter">0</span></td></tr></tbody><tbody>';
for (var i = 0; i < g_drivers.length; i++) {
if (g_drivers[i].updated == 'yes') {
status_img = 'images/sidebar/signal3.png';
} else if (g_drivers[i].updated == 'waiting') {
status_img = 'images/sidebar/signal2.png';
} else if (g_drivers[i].updated == 'NA') {
status_img = 'images/sidebar/signal1.png';
} else {
status_img = 'images/sidebar/signal0.png';
}
if (g_drivers[i].heading === 0 || isNaN(g_drivers[i].heading) === true || g_drivers[i].headingOldCounter >= 30) {
dir_img = 'images/sidebar/no_dir.png';
} else {
dir_img = 'images/sidebar/arrow.png';
}
if (g_activeID == g_drivers[i].uuid) {
activeCSS = ' active';
} else {
activeCSS = '';
}
if (g_drivers[i].online === true) {
if (g_drivers[i].headingOldCounter >= 30 && g_drivers[i].no_signal == 0){
g_drivers[i].heading = 0;
countS += 1;
standingDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div id="driver_info" class="driver_info"><img class="signal_img" src="' + status_img + '"></div>' +
//'<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg);" src="' + dir_img + '">' +
'<img id="img_' + g_drivers[i].uuid + '" class="dir_img" src="' + dir_img + '">' +
'</div>' +
'</td></tr>';
} else if (g_drivers[i].no_signal == 1) {
countI += 1;
inactiveDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div id="driver_info" class="driver_info"></div>' +
'' +
'</div>' +
'</td></tr>';
} else {
countM += 1;
movingDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div id="driver_info" class="driver_info"><img class="signal_img" src="' + status_img + '"></div>' + //<p class="img__description">' + timeConverter(g_drivers[i].signal_time) + '</p>
//'<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg);" src="' + dir_img + '">' +
'<img id="img_' + g_drivers[i].uuid + '" style="transition: transform 2s;" src="' + dir_img + '">' +
'</div>' +
'</td></tr>';
}
} else if (g_drivers[i].online === false) {
countO += 1;
offlineDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div class="driver_info"> </div>' +
'</div>' +
'</td></tr>';
} else {
console.log('Hier darf eigentlich nix passieren');
}
}
movingDrivers += '</tbody>';
inactiveDrivers += '</tbody>';
standingDrivers += '</tbody>';
offlineDrivers += '</tbody>';
document.getElementById('sidebar-scroll').innerHTML = '<table class="sidebar_table">' + movingDrivers + standingDrivers + inactiveDrivers + offlineDrivers + '</table>';
document.getElementById('moving_counter').innerHTML = countM;
document.getElementById('standing_counter').innerHTML = countS;
document.getElementById('inactive_counter').innerHTML = countI;
document.getElementById('offline_counter').innerHTML = countO;
for (var j = 0; j < g_drivers.length; j++) {
if (g_drivers[j].online === true && g_drivers[j].no_signal === 0 && g_drivers[j].headingOldCounter < 30) {
//added the following line, to get better data-values
g_drivers[j].heading = Math.random()*360;
document.getElementById('img_' + g_drivers[j].uuid).style.transform = 'rotate(' + g_drivers[j].heading + 'deg)';
}
}
}

CSS transitions allows you to change property values smoothly (from
one value to another), over a given duration.
But, you're not changing the property (transform) in your code. You're replacing img so it has no start and end values for the transition.
Like this:
var dir_img = 'https://image.freepik.com/iconos-gratis/flecha-hacia-arriba_318-74795.jpg';
setInterval(function() { // emulating the data changes continuously
var g_drivers = [
{id:1, heading: ~~(Math.random()*360)},
{id:2, heading: ~~(Math.random()*360)}
];
var html = '';
for (var i in g_drivers)
html += '<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">';
document.getElementById('sidebar-scroll').innerHTML = html;
}, 500);
.dir_img {
width:70px; margin:20px;
transition: transform 2s;
}
<div id="sidebar-scroll"></div>
But if you need the transitions to be applied you have to keep the images and change their transform property like this:
var dir_img = 'https://image.freepik.com/iconos-gratis/flecha-hacia-arriba_318-74795.jpg';
var sidebar = document.getElementById('sidebar-scroll');
// setting up the drivers (initially empty):
var drivers = {};
// emulating the data changes continuously
setInterval(function() {
var drivers_data = {
'driver_1': {heading: ~~(Math.random()*360)},
'driver_2': {heading: ~~(Math.random()*360)}
};
for (var i in drivers_data) {
if (!drivers[i]) { // it's a new driver, lets add it:
drivers[i] = Object.assign({}, drivers_data[i]);
sidebar.innerHTML += '<img id="' + i + '" class="dir_img" src="' + dir_img + '">';
}
// now change driver's property:
document.getElementById(i).style.transform = 'rotate(' + drivers_data[i].heading + 'deg)';
}
}, 1000);
.dir_img {
width:70px; margin:20px;
transition: transform .7s;
}
<div id="sidebar-scroll"></div>

Use CSS transitions. This will let you ease between the transforms. Couple that with the setInterval that you should be using to get the amount you need to transform each iteration.
For example, the below snippet will have the transform ease between whatever the current transform is and the target transform over the course of 200ms (milliseconds).
const img = document.getElementById("image"),
input = document.getElementById("amount");
let curr = 0;
setInterval(() => {
curr += (parseInt(input.value, 10) || 0);
img.style.transform = `rotate(${curr}deg)`;
}, 1000);
.rotater {
transition: transform 200ms ease;
}
<div><label for="amount">How much to rotate by</label> <input type="number" id="amount" value="10" step="10" min="10" max="90"></div>
<div>
<img id="image" class="rotater" src="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be">
</div>

Click on the x in the SelectPicker element

var selectedTags = [];
var selectedTags2 = [];
if (d && d.length) {
d.forEach(function(value, index, array) {
if (index < 5) {
var color = $('option[value="' + value + '"]').data('color');
var tagSpan = '<span class="label label-' + color + '" style="margin-right:1px;"><span class="icon icon-times">' + value + '</span></span>';
selectedTags.push(tagSpan);
list = [];
c = 1;
} else {
var color2 = $('option[value="' + value + '"]').data('color');
var tagSpan2 = '<span class="label label-' + color2 + '" style="margin-right:1px;"><span class="icon icon-times">' + value + '</span></span>';
selectedTags2.push(tagSpan2);
list.push(tagSpan2);
}
});
}
var allTagsElement = selectedTags.join('');
if (a <= 0) {
return "<div class='col-md-11 col-xs-10' style='padding-left:0px;'> " + allTagsElement + " </div><div class='col-md-1 col-xs-2'id='eSecim'></div>";
}
return "<div class='col-md-10 col-xs-10' style='padding-left:0px;'> " + allTagsElement + " </div><div class='col-md-1 col-xs-2'id='eSecim'>+" + (-a) + "</div>";
I want to get out of here.
I use the bootstrap selectpicker. I will select it by clicking on the x next to the elements.

how to find the divs specific Nth siblings of child divs positions

i create new hours calendar. as per the IMAGE1 when user click on any of div that dynamic Span was created up to 8 hours.
i.e. if click on 00:00 its design up to 08:00 hours
so my question is how to get that specific siblings 8th divs child position.
Or any other way please suggest me.
$(this).eq(+8).attr("id");
IMAGE1
Table Design Code when ajax return Success:
$(r.emp_nm).each(function (index) {
tabelBody += "<tr><td style='width:10%'><div class='col-xs-3 col-md-3 on-break-tab'>" + this.fname.charAt(0) + this.lname.charAt(0) + "</div>" + this.fname + ' ' + this.lname + " </td>";
for (var i = 0; i < 24; i++) {
var tabelsubBody = "";
var p = 15;
var t_id = r.hours[i];
for (var j = 0; j < 4; j++) {
tabelsubBody += "<div style='float:left; width:25%;height:inherit;' class='Dropablesub_td' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "_" + j + "'></div>";
}
if (i === 23) {
tabelBody += "<td style='width:12.5%' class='Dropabletd' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "'>" + tabelsubBody + "</td></tr>";
} else {
tabelBody += "<td style='width:12.5%' class='Dropabletd' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "'>" + tabelsubBody + "</td>";
}
}
});
$("#tabelBody").html(tabelBody);
$("#tdDate").html(r.today);
$("#SelectDate").val(r.today);
$("#currentSelect").val("Days");
Events();
And Events() is :
function Events() {
$("body").on("click", ".Dropablesub_td", function () {
var hidid = $(this).attr("id");
var Myleft = $(this).position().left;
var Mytop = $(this).position().top;
alert($(this).eq(+8).attr("id"));
$(this).append("<span id='" + hidid + "' class='divId label label-success ui-widget-content filediv unselectable' >ABCDEFGHIJKLMNOPQRSTUVWXYZ<span>");
$(this).children(
).css({zIndex: 999, position: "absolute", top: Mytop, left: Myleft, width: '40%', display: "block", border: "#808080 solid 2px", color: "black", background: "#00CEB4"});
});
}

You can get the desired element using .index() of current element and then using .eq() to target the next element.
Here in the snippet I have created a pseudo code for demonstration
$(document).on("click", ".dropabletd", function() {
var tr = $(this).closest('tr');
var tds = tr.find('td');
var index = tds.index(this);
var sibling = tds.eq(index + 8);
console.log($(this).attr('id'), sibling.attr('id'));
});
createTable();
function createTable() {
var tabelBody = ""
for (var i = 0; i <= 23; i++) {
tabelBody += "<td class='dropabletd' id='id" + i + "'>" + i + "</td>";
}
$("table tr").html(tabelBody);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr></tr>
</table>

function result into the div by button onclick

I learn javascript and I have problem. I trying put function results into a div by click on button.
<script type="text/javascript">
function choinka() {
var x=document.getElementById("liczba").value;
var a="W";
var b="W";
var px="15"
for(j=1;j<=x;j++)
{
for(i=j;i<=x;i++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
document.write("<span style='color:green;background:green;line-height:" + px + "px;'>" + b + "</span>");
b+="WW";
for(k=j;k<=x;k++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
document.write("<br />");
}
for(k=1;k<=x/2;k++)
{
for(m=1;m<=x;m++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
b="W";
document.write("<span style='color:brown;background:brown;line-height:" + px + "px;'>" + b + "</span>");
for(m=1;m<=x;m++)
{
document.write("<span style='color:white;line-height:" + px + "px;'>" + a + "</span>");
}
document.write("<br />");
}
}
</script>
and body contain:
<p>Wielkość: <input type="text" id="liczba" /><input type="submit" value="Rysuj" onclick="choinka()" /></p>
<div id="choinka"></div>
How put results of function choinka() by clicking button into the div#choinka?

Here is a working code. Some notes:
you are writing to document using document.write() (which is not a good habit). It's more efficient to contatenate the html in a variable and then set the innerHTML property of the element div#
your loops were not working. the second parameter is the condition of the loop so you ahve to write j <= x.length and not j <= x
Here is a working example on jsfiddle (merry christmas ;-))
function choinka() {
var x = document.getElementById("liczba").value;
var a = "W";
var b = "W";
var px = "15";
var html = '';
for (j = 1; j <= x.length; j++) {
for (i = j; i <= x.length; i++) {
html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
}
html += "<span style='color:green;background:green;line-height:" + px + "px;'>" + b + "</span>"
b += "WW";
for (k = j; k <= x.length; k++) {
html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
}
html += "<br />";
}
for (k = 1; k <= x.length / 2; k++) {
for (m = 1; m <= x.length; m++) {
html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
}
b = "W";
html += "<span style='color:brown;background:brown;line-height:" + px + "px;'>" + b + "</span>";
for (m = 1; m <= x.length; m++) {
html += "<span style='color:white;line-height:" + px + "px;'>" + a + "</span>";
}
html += "<br />";
}
document.getElementById('choinka').innerHTML = html;
}