Develop Reference

Content of innerHTML is "undefined"

I never had this problem before, but now working with PHP when I try to edit the content of a div with the id of a product taken directly from it's id in the database like this (both separaed in two foreach getting their current correct IDs) because I need them separated so when I can change the content, I can modify it so I can make the second DIV display: none by default and after clicking the first one making it display: inline:
<div id="h<?php echo $obra['id'] ?>" onClick="display()"> </div> // Getting ID h + 84 (h84) this time
<div id="<?php echo $obra['id'] ?>"> TEST TEXT</div> // Getting ID 84 this time)
And the function is:
function display() {
var result = document.getElementById("84").innerHTML;
result.innerHTML = "test";
alert(result);
}
Now, when I click the first DIV, it should get the content of the div with ID 84, which is "TEST TEXT", and then change it for "test" and change the content which I see in the browser and after that, alert with the new result value, but the content doesn't change and the alert shows me TEST TEXT.
Here is the full relevant code if needed:
<div class="row m-0">
<div class="accordion pl-0 col-4 text-center">
<?php if ( count($cuadros) == 0) { ?>
<p class="text-center mt-3">No hay cuadros registrados.</p>
<?php } else {
$cont = 0;
foreach ( $cuadros as $obra ) { ?>
<div class="card border-top-0 border-left-0 rounded-0 p-0">
<div class="card-header border-0" id="h<?php echo $obra['id'] /* it gets value "84" */ ?>" onClick="display()">
<h5 class="mb-0">
<?php echo $obra['nombreObras']; ?>
</h5>
</div>
</div>
<?php $cont++; } ?>
</div>
<?php foreach ( $cuadros as $obra ) { ?>
<div class="col-4 hidden" id="<?php echo $obra['id'] /* It gets value "84" */ ?>">
TEST TEXT
</div>
<?php } ?>
<?php } ?>
</div>
And a screenshot of what happens (note that the change should be reflected in the alert, which is not)
Thank you!

You are performing innerHTML agin. So it will return error. Remove innerHTML from result
function display() {
var result = document.getElementById("84");
result.innerHTML = "test";
alert(result);
}

How to make carousel display more than one slide?

Carousel I have only displays one post at a time. Ideally, I would like to use PHP to display a mysql query. What's wrong from the JS and HTMl code?
When I see the Fiddle the demo, it works great until I put it in my website. At first glance is there something wrong.
What happens is the elements of slides just show up as one slide all the way to the left.
<div class="carousel-inner">
<?php
$count_row = 0;
while ($row2 = mysqli_fetch_array($result)){
if ($count_row == 0 ){
?>
<div class="item active">
<div class="col-xs-4">
<img src="post_image/Snip20161219_9.png" class="img-responsive">
</div>
</div>
<?php
$count_row = $count_row + 1;
} else if (count_row == 2) {
$count_row = $count_row + 1; ?>
<div class="item active">
<div class="col-xs-4">
<img src="post_image/Snip20161219_9.png" class="img-responsive">
</div>
</div>
<?php
$count_row = $count_row+1;
} else if (count_row == 1) { ?>
<div class="item active">
<div class="col-xs-4">
<img src="post_image/Snip20161219_9.png" class="img-responsive">
</div>
</div>
<?php
$count_row = $count_row+1;
} else { ?>
<div class="item">
<div class="col-xs-4">
<img src="post_image/Snip20161219_9.png" class="img-responsive">
</div>
</div>
<?php
$count_row = $count_row + 1;
}
?>
<?php };?>
</div>
JAVASCRIPT
$(document).ready(function() {
// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
interval: false
});
// for every slide in carousel, copy the next slide's item in the slide.
// Do the same for the next, next item.
$('.carousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}

Change background of dynamic added elements

I want to change the background of the last added element in the dom. To give you a better look here is the html:
<div class="check-in-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="ticket-img">
<img class="image" src="img/icons/ticket.png">
</span>
</div>
<div class="ui-block-b">
<h4>Inchecken</h4>
<div class="check-in-notification-append"></div>
</div>
</div>
</div>
<div class="douane-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="douane-img">
<img class="douane-img image" src="img/icons/douane.png">
</span>
</div>
<div class="ui-block-b">
<h4>Douane</h4>
<div class="douane-notification-append"></div>
</div>
</div>
</div>
<div class="gate-wrapper">
<div class="ui-grid-a">
<div class="ui-block-a">
<span class="gate-img">
<img class="gate-img image" src="img/icons/gate.png">
</span>
</div>
<div class="ui-block-b">
<h4>Gate</h4>
<div class="gate-notification-append"></div>
</div>
</div>
Where I append the elements to check-in-notification-append, douane-in-notification-append, gate-in-notification-append here a better look at the js file.
$(document).on("pagebeforeshow","#progress",function(){
var incheckHtml = '';
var douaneHtml = '';
var gateHtml = '';
for(var count = 0; count < info.data.length; count++){
var shortmessage = info.data[count][3];
var category = info.data[count][4];
var typeOf = info.data[count][5];
if(typeOf === "warning"){
imgPath = 'img/icons/alarm.png';
} else {
imgPath = 'img/icons/alert.png';
}
if (!Array.prototype.last){
Array.prototype.last = function(){
return this[this.length - 1];
};
};
if (category === 'inchecken'){
incheckHtml = incheckHtml + "<div class='notification-item'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
// $('.check-in-wrapper').empty().prepend(incheckHtml);
$('.check-in-notification-append').empty().prepend(incheckHtml);
}
if(category === 'douane'){
douaneHtml = douaneHtml + "<div class='notification-item overlay'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
$('.douane-notification-append').empty().prepend(douaneHtml);
}
if(category === 'gate'){
gateHtml = gateHtml + "<div class='notification-item overlay'><img class='notification-image' src=" + imgPath + "><span class='notification-text'>" + shortmessage + "</span></div>";
$('.gate-notification-append').empty().prepend(gateHtml);
}
}
});
But how do I acces the last added element in any category which removes the class "overlay". I'll hope someone could help me out accessing the last added element and removeClass overlay. I have written an .last() function but this will only give me the output of the last object in array...

I think you could achieve this by having some common selector which applies to all the elements that could be affected and using Jquery's last() function.
$(".allMyThings").last().removeClass("overlay");
https://api.jquery.com/last/

How to make an image inside a modal clickable

I have button that displays a modal which contains many icons, and I want it when I click one of the images it will indicate that I have clicked it. But I don't have any idea how to implement it.
So far this is how my modal looks like.
My objective:To put an indicator that I have clicked it.
CODE
<div class="modal-body">
<div class="row">
<div class="col-lg-6 pull-left">
<?php
$tokenSql = mysql_query(" SELECT * FROM topplayer WHERE user_id = '$user_id' ");
$retToken = mysql_fetch_assoc($tokenSql);
$token = $retToken['token'];
echo ("<b>Tokens : $token </b><br>");
?>
</div>
<div class="col-lg-6 pull-right">
</div>
</div>
<div class="row ml">
<?php
$sendGiftSql = mysql_query("SELECT * FROM gifts WHERE isDelete = 'false' ORDER BY price ");
while($sendGift = mysql_fetch_assoc($sendGiftSql)){
$giftIMG = $sendGift['img_path'];
echo("
<div class='col-xs-4 mb'>
<br>
<img id='edgiftPhoto' class='center-block' alt='No image' src='$giftIMG' style='height:120px; width: 120px'/>
</div>
");
}
?>
</div>

Generic, super super super simple solution. No need for a plugin.
JS:
$('.modal-body').on('click','img',function(){
$(this).toggleClass('clicked');
})
CSS:
.clicked{
border:1px solid black;
//style it however you want
}

jquery .attr() returning as undefined

I have the following jQuery code below:
My Html:
<div class="input-group top_buffer_small">
<label class="col-md-3 col-sm-3 text_right top_buffer_mini">Available Colors:</label>
<div class="col-md-9 col-sm-9 text_right">
<table id="availColors" align="center">
<?php
//instantiate color class
$colors = $Item->getColors();
$colorCount = $Item->getColorCount();
if($colorCount > 0){
//create a mod since we only want to show 4 colors per row.
$remainder = $colorCount%4;
$x=0; //counter variable
if(is_array($colors)){
foreach ($colors as $key=>$value){
foreach ($value as $color) {
if($remainder == 0){
//if we are at 0, make a new row
echo "<tr>";
}
//print_r($Item->getProductVariations($color));
?>
<td style="background-color:#<?php echo $color;?>" data-pictures="<?php echo htmlspecialchars(json_encode($Item->getProductVariations($color))); ?>" data-directory="<?php echo $pictures.$category.'/'.$itemid.'_'.$itemName.'/';?>"></td>
<?php
if($remainder == 3){
//end the row
echo "</tr>";
}
//$x++;
}
}
}
}
?>
</table>
</div>
</div>
Basically, I am trying to get the array values which are being passed from the to my javascript. After I get the values, I am trying to make all the image thumbnails change to the pictures on click of a color.
This is the div I am aiming to change the picture thumbnails:
<div class="row">
<div class="featured_container_small" id="productThumbnails">
<h5>Other Views</h5>
<div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
<!-- <div class="col-md-3 buffer_bottom"><img src="<?php echo $pictures.$category.'/'.$itemid.'_'.$itemName.'/'.$smallimage1?>" class=" center_image responsive_image"></div> -->
<div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
<div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
<div class="col-md-3 buffer_bottom"><img src="http://placehold.it/80x100" alt="" class=" center_image responsive_image"></div>
</div>
<div class="row">
<div class="col-md-12"><nbsp></nbsp></div>
</div>
<div class="clear"></div>
</div>
Then this is my jquery:
$(function(){
$("#availColors td").click(function(){
var imageDirectory = $(this).attr('data-directory');
var pictures = $(this).attr('data-pictures');
var pictureArray = JSON.parse(pictures);
var productThumbnails = $("#productThumbnails img");
var thumbnailCount = productThumbnails.length;
var keys = Object.keys(pictureArray);
var pic = "";
var src="";
for (var i = 0; i < keys.length; i++) {
pic = pictureArray[keys[i]];
productThumbnails[i].attr("src",imageDirectory+pic+".jpg");
}
});
});
When I perform my click function, an error returns saying "undefined is not a function".
I don't know why its doing this. Some help please.

When you iterate over the images collection, productThumbnails[i] returns the underlying HTMLImageElement which doesn't provide the attr() method. Try to wrap it with jQuery instead:
$(productThumbnails[i]).attr("src",imageDirectory+pic+".jpg");
Also, when using jQuery, the best way to access arbitrary data associated with your DOM elements is using the data() method:
var imageDirectory = $(this).data('directory');
var pictures = $(this).data('pictures');
As a bonus, you'll also get JSON deserialization out of the box and there's no need for JSON.parse():
var pictureArray = $(this).data('pictures');