We Keep Coding

Change the outcome of a variable based on a button push to match a different button

I have a button with an id that sets a global variable like this:
<div class="mybuttons"
<button id="mapOne" data-toggle="modal" data-target="#map-1-scene-1">Scene</button>
<button class="no-click-span" id="mapOneCurrent" data-toggle="modal" data-target="#map-1-scene-1"><i class="fas fa-charging-station fa2x"></i> Current</button>
</div>
Then in JS:
var mapNumber;
const mybuttons = document.querySelectorAll('.mybuttons button');
mybuttons.forEach(mybutton => {
mybutton.addEventListener('click', processClick);
});
function processClick() {
window.mapNumber = this.id; // the id of the clicked button
}
The second button in the div with the id #mapOneCurrent just reopens the modal without refreshing the data.
What I would like to happen, is if the second button is pushed (eg #mapOneCurrent) that the variable mapNumber just remains as mapOne (without the word "Current" at the end of it). So it would almost be as if the other button had been pushed.
Is this possible to do in this type of scenario?

This should do what you want:
var mapNumber;
const mybuttons = [...document.querySelectorAll('.mybuttons button')];
mybuttons.forEach(mybutton=>{
mybutton.addEventListener('click',function() {
window.mapNumber = this.id.replace("Current",""); // the id of the clicked button
console.log(mapNumber);
});
})
<div class="mybuttons">
<button id="mapOne" data-toggle="modal" data-target="#map-1-scene-1">Scene</button>
<button class="no-click-span" id="mapOneCurrent" data-toggle="modal" data-target="#map-1-scene-1"><i class="fas fa-charging-station fa2x"></i>Current</button>
</div>
However, you could simplify it by using "delegated event listening" to:
var mapNumber;
document.querySelector('.mybuttons').addEventListener('click',function(ev){
if (ev.target.tagName==="BUTTON") {
window.mapNumber = ev.target.id.replace("Current","");
console.log(mapNumber);
}
})
<div class="mybuttons">
<button id="mapOne" data-toggle="modal" data-target="#map-1-scene-1">Scene</button>
<button class="no-click-span" id="mapOneCurrent" data-toggle="modal" data-target="#map-1-scene-1"><i class="fas fa-charging-station fa2x"></i>Current</button>
</div>
In this snippet the event is listening to clicks on the wrapper container .mybuttobs but will trigger actions only if an inside BUTTON was clicked.

How to check if the element is visible

How do i know if my element is visible or not using javascript. I'm using $('#element').hide();, $('#element').show(); to hidden or shown an element. How can i check if the element is shown? The element is in the modal. I tried to change the element which is not in the modal and it worked, but when i put the element inside the modal it's not working..
I tried using this code but it's not working.
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" oninput="total();"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<script>
if ($('.me').is(':visible')) {
mt = m / 100 * 50 + 50;
}
</script>

"none" == document.getElementById("element").style.display //Check for hide
"block" == document.getElementById("element").style.display //Check for show
you can use like also
if ($('#element').css('display') == 'none') {
alert('element is hidden');
}

Checks for display:[none|block], ignores visible:[true|false]
$('#element').is(":visible");

It seems your selector is wrong.
Example of $("[element]").is(":visible") below: (for refrence)
$("#show").on("click", function() {
$("#text").show();
})
$("#hide").on("click", function() {
$("#text").hide();
})
$("#getStatus").on("click", function() {
alert($("#text").is(":visible"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Hello</div>
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="getStatus">Get Status</button>

$('.me') is a class selector which will return array of elements where elements have class me.
So you need to target the specific div either by using this or by using index as there can be many elements with same class name.
$('.me').is(':visible') this will check the first element and return result according to first element's visibility.
You can try
$(".me").eq(1).is(':visible') //Here 1 is index of div which can vary
OR
$(this).is(':visible')

Copy a Class to a Div with Javascript

I have looked and I still can not figure out how to copy a <p> class named "booking-item-header-price" to the <div> named "myDiv" (basically cloning the <p> to the <div> with JavaScript. It might be important to note that the contents of the <p> class changes based on the price of the item. I have tried some things on JSFiddle but to no avail. Any help would be appreciated.
<p class="booking-item-header-price">
<small>Price</small>
<span class=" onsale">$70.00</span>
<i class="fa fa-long-arrow-right"></i>
<span class="text-lg">$56.00</span>/day
</p>
<div id="myDiv"></div>

If you are wanting to move the element: call appendChild() on the parent element you want to add the element to (#myDiv) with a reference to the element you want to move, your <p> element.
var parent = document.querySelector("#myDiv");
var child = document.querySelector(".booking-item-header-price");
parent.appendChild( child );
If you want to copy the element: use cloneNode() on the child element to make a copy before appending. Pass in true for a deep copy,
var parent = document.querySelector("#myDiv");
var child = document.querySelector(".booking-item-header-price");
parent.appendChild( child.cloneNode(true) );
Note in the copying version you will lose any event listeners you might have applied like through addEventListener()
Demo
var parent = document.querySelector("#myDiv");
var child = document.querySelector(".booking-item-header-price");
parent.appendChild( child.cloneNode(true) );
#myDiv {
padding:30px;
border:1px solid;
}
<p class="booking-item-header-price">
<small>Price</small>
<span class=" onsale">$70.00</span>
<i class="fa fa-long-arrow-right"></i>
<span class="text-lg">$56.00</span>/day
</p>
<div id="myDiv"></div>

function copy(){
document.querySelector('#myDiv').innerHTML =
document.querySelector('.booking-item-header-price').innerHTML;
}
<p class="booking-item-header-price">
<small>Price</small>
<span class=" onsale">$70.00</span>
<i class="fa fa-long-arrow-right"></i>
<span class="text-lg">$56.00</span>/day
</p>
<div id="myDiv"></div>
<button type="button" onclick="copy()">
Copy to #myDiv
</button>
This way we get the innerHTML (all the content including html tags) inside the .booking-item-header-pricep and assign it to the innerHTML of the #myDiv div.

Issues with find() when inserting html dynamically using jquery

I have a modal with a grid of buttons representing different html components. When one of the buttons is pressed, some html is supposed to be injected into the page once the modal closes. However, I'm having trouble targeting the specific column where the html is to be injected. Here's my code:
<div class="row" id="newRow">
<div class="col-md-12 column">
<button class="btn addElement" href="#" data-toggle="modal" data-target="#add-element"><i class="fa fa-plus fa-3x add-item"></i></button>
</div>
</div>
And in my js file I have some code to assign an id to the column div (since there could potentially be many columns with this addElement button) that looks like this:
...
$(this).parent().next().children().find('.column').assignId();
...
Up to this point, everything works well. I'm having no trouble getting the column a unique id (defined in my assignId() function).
As I mentioned, the addElement button gets clicked, opening a modal which is when this code is executed:
$(document).on('click', 'button.addElement', function (e) {
e.preventDefault();
$('#add-element').modal('show').draggable();
var col = $('button.addElement').parent();
// debugging in the browser verifies that the colId
// successfully stores the id attribute for the column
var colId = col.attr('id');
addElements(colId);
});
...
function addElements(colId) {
$('#insert-paragraph').on('click', function () {
var html_content = '<div class="box" data-type="paragraph">...</div>';
$("#newRow").find("#"+colId).html(html_content)
$('#add-element').modal('hide');
});
}
It's on this line: $("#newRow").find(colId).html(html_content); that I'm having the issue. My guess is that the formatting for find(...) is wrong and that I can't just insert a variable like that, but I've tried a few different things and nothing seems to be working.
Any help is very much appreciated.
Thanks!
UPDATE:
#juvian suggested writing a few of the variables' values to the console:
console.log(colId);
console.log($("#newRow")).length;
console.log($("#newRow").find("#"+colId).length);
console.log($("#newRow").find("#"+colId).html());
I logged these values twice. First, just before passing colId into the addElements function and in the addElements function immediately after $(#newRow").find("#"+colId).html(html_content); The results of those two tests are as follows:
Values prior to running addElements:
console.log(colId); = 8153-1076-641d-3840
console.log($("#newRow")).length; = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <button class="btn addElement"...>...</button>
Values after the insert-paragraph button is pressed:
console.log(colId); = 8153-1076-641d-3840
console.log($("#newRow")).length; = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <div class="box box-element" data-type="paragraph">...</div>
Interestingly enough, it appears like everything is working like I'd expect it to, however, when it's all said and done, the addElement button remains and the page still renders this:
<div id="newRow" class="row clearfix">
<div id="32aa-ab91-f50d-c3b3" class="col-md-12 column ui-sortable">
<button class="btn addElement" data-target="#add-element" data-toggle="modal" href="#">
<i class="fa fa-plus fa-3x add-item"></i>
</button>
</div>
</div>

.find as most jquery functions, takes a css selector as parametre. Unfortunately, colId is just a string, so it matches no elements (unless colId is html, span or something like that)
You are just missing adding the id selector at the beginning to do an id match:
.find("#"+colId)

I guess The parent of button is a div here which has no id.
var col = $('button.addElement').parent();
thus var colId is getting no value.give that div an id and it should be fine.

I need to create divs with nested divs inside it

have a look at the code
Html Code :
<div class="container content-rows" id="contentdisplay">
<div class="col-md-1" id="snocontent">abcd</div>
<div class="col-md-3" id="pgnamecontent">abcd</div>
<div class="col-md-3" id="cmpcontent">abcd</div>
<div class="col-md-2" id="datecontent">abcd</div>
<div>
<button onclick="createdivs()"><span class="glyphicon glyphicon-king" class="addtrainersbutton" id="addtrainersbutton" title="Add Trainers"></span></button>
<button onclick="edit_program()"><span class="glyphicon glyphicon-pencil" id="editprogrambutton" title="Edit Program"></span></button>
<span class="glyphicon glyphicon-user" id="assigntrainersbutton" title="Assign Trainers for the Program"></span>
<span class="glyphicon glyphicon-remove" id="deleteprogrambutton" title="Delete the Program"></span>
</div>
Javascript Code:
function createdivs() {
var i;
for (i = 0;i < 10;i++)
{
divc = "<div>.container.content-rows";
var list = document.createElement("divc");
document.body.appendChild(list);
list.className = "proglist";
}
}
I have a few questions, please clarify them or explain with code:
10 divc's are created but there are no other div elements inside them, only the first div has some content in it.. other divs are just created and they dnt even occupy space inside the webpage
I want the div to be aligned to the first div, ie., instead of document.body.appendChild I need something like document.div.appendChild, whereas the created divs should be appeneded with the first div..
Please let me know how can I get them with explanation.. Thank you in advance..

10 divc's are created but there are no other div elements inside them, only the first div has some content in it.. other divs are just created and they dnt even occupy space inside the webpage
Space isn't occupied because they don't have any content added to them. You add content to an element just like you do with document.body - appendChild() for example.
I want the div to be aligned to the first div, ie., instead of document.body.appendChild I need something like document.div.appendChild, whereas the created divs should be appeneded with the first div..
Elements have such a method:
function createdivs() {
var i;
for (i = 0; i < 10; i++) {
divc = "<div>.container.content-rows";
var divc = document.createElement("div");
divc.classList.add("container");
divc.classList.add("content-rows");
divc.classList.add("proglist");
divc.textContent = "I'm div #" + i;
document.getElementById('contentdisplay').appendChild(divc);
createNestedDivs(divc);
}
}
function createNestedDivs(selector) {
function appendToNode(node, content) {
// ideally content would also be a Node, but for simplicity,
// I'm assuming it's a string.
var inner = document.createElement('span');
inner.textContent = content;
node.appendChild(inner);
}
if (selector instanceof Node) {
appendToNode(selector, "inner");
return;
}
var selected = Array.prototype.slice.call(document.querySelectorAll(selector));
selected.forEach(function(el) {
appendToNode(el, "inner");
});
}
<div class="container content-rows" id="contentdisplay">
<div class="col-md-1" id="snocontent">abcd</div>
<div class="col-md-3" id="pgnamecontent">abcd</div>
<div class="col-md-3" id="cmpcontent">abcd</div>
<div class="col-md-2" id="datecontent">abcd</div>
<div>
<button onclick="createdivs()"><span class="glyphicon glyphicon-king" class="addtrainersbutton" id="addtrainersbutton" title="Add Trainers"></span>
</button>
<button onclick="edit_program()"><span class="glyphicon glyphicon-pencil" id="editprogrambutton" title="Edit Program"></span>
</button> <span class="glyphicon glyphicon-user" id="assigntrainersbutton" title="Assign Trainers for the Program"></span>
<span class="glyphicon glyphicon-remove" id="deleteprogrambutton" title="Delete the Program"></span>
</div>
The createNestedDivs() function takes care of if you want to append another child to each created element. You can pass it a Node or string and it will treat them as expected. createNestedDivs() works by the same principles as the modifications I made to createdivs(). The case for handling a Node is simple enough, but the string handling is a little less clear:
The Array.prototype.slice.call is necessary because document.querySelectorAll returns a NodeList, which isn't an array, and I can't use Array.prototype.forEach() on it.
Also, related reading here: http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript