We Keep Coding

Get id of link that opened the popup

I have a table with column that has a "view" link to view popup. On the popup,
I have a search button I want to get the id of the view link that opened the popup,
when I press search in the popup typically to get some data attributes
associated with each table link..(ex. $this.thisIdopenedMe)
<div id="popup" class="popup">
<input type="button" id="searchbtn" onclick="alert($('#smthing??').data("feature"))">
</div>
<table>
<tr> <div id="viewlink" data-feature="alfa" onclick="openPopup("popup")"></div> </tr>
<tr> <div id="viewlink" data-feature="gama" onclick="openPopup("popup")"></div> </tr>
<tr> <div id="viewlink" data-feature="bita" onclick="openPopup("popup")"></div> </tr> ...
</table>

I would just use vent delegation and assign more data listeners if you are going to follow the pattern you are using.
var table = document.querySelector("table");
var popUp = document.querySelector("#popup");
var btnSearch = document.querySelector("#searchbtn");
table.addEventListener("click", function (event) {
var target = event.target;
var elem = target.closest('[data-feature]');
if (elem) {
var selection = elem.dataset.feature;
popUp.classList.toggle("active");
btnSearch.dataset.item = selection;
}
});
btnSearch.addEventListener("click", function (event) {
console.log(btnSearch.dataset.item);
});
.popup {
display: none;
}
.popup.active {
display: block;
}
<div id="popup" class="popup">
<input type="button" id="searchbtn" value="search">
</div>
<table>
<tr> <td><div id="viewlink" data-feature="alfa">A</div></td></tr>
<tr> <td><div id="viewlink" data-feature="gama">B</div></td></tr>
<tr> <td><div id="viewlink" data-feature="bita">C</div></td></tr>
</table>

You can create a global variable selectedFeature and in your openPopup function set that variable to the value of the data attribute so you have it on hand when you need it on search button click.
To get the select element data attribute, you can pass the event from the onclick event to your openPopup function.

function openPopup(div_id, data) {
popup = document.getElementById(div_id);
popup.dataset.feature = data;
console.log(popup.dataset);
}
function showData(div_id) {
popup = document.getElementById(div_id);
console.log(popup.dataset.feature);
}
<div id="popup" class="popup" data-feature="">
<input type="button" id="searchbtn" onclick="showData('popup')" value="press me">
</div>
<table>
<tr>
<div id="viewlink" data-feature="alfa" onclick="openPopup('popup',this.dataset.feature)">
alfa
</div>
</tr>
<tr>
<div id="viewlink" data-feature="gama" onclick="openPopup('popup',this.dataset.feature)">gama
</div>
</tr>
<tr>
<div id="viewlink" data-feature="bita" onclick="openPopup('popup',this.dataset.feature)">bita
</div>
</tr>
</table>

Insert multiple images randomly into different table cells using Javascript

I'm pretty new in Javascript/Jquery, currently still learning and so here I am seeking help. I would like to insert different images randomly (the location changes everytime i refresh the page) into table cells using Javascript/Jquery and not touching HTML/CSS.
I have tried using append to insert the images, however every image appears in all table cells which weren't what I wanted. I have also tried backgroundrepeat: no repeat but it doesn't work. It would be good if there's some simple coding that would work, so it will be easier for me to understand.
I can't use getElementById cause my separated js file can't detect the ID from the HTML file
HTML:
<table id="Image">
<tr>
<td><div class="ImageHere" value=1></div></td>
<td><div class="ImageHere" value=2></div></td>
<td><div class="ImageHere" value=3></div></td>
<td><div class="ImageHere" value=4></div></td>
<td><div class="ImageHere" value=5></div></td>
</tr>
<tr>
<td><div class="ImageHere" value=6></div></td>
<td><div class="ImageHere" value=7></div></td>
<td><div class="ImageHere" value=8></div></td>
<td><div class="ImageHere" value=9></div></td>
<td><div class="ImageHere" value=10></div></td>
</tr>
</table>
my jQuery best try:
$(document).ready(function(){
$(".ImageHere").append("<img src='images/card.jpg' width='100%' height='100%' />" ) });
});

I hope that can help!
const divs = [...document.querySelectorAll('.ImageHere')];
const images =
[
'https://i.pinimg.com/originals/d4/7e/9e/d47e9e4a28894bfbd416b4f53ca15b95.jpg',
'https://fedoraproject.org/w/uploads/thumb/1/16/Sunset-in-pennsylvania-960px.jpg/285px-Sunset-in-pennsylvania-960px.jpg',
'https://fedoraproject.org/w/uploads/thumb/a/a0/F26-final-night-default-wallpaper-standard.png/300px-F26-final-night-default-wallpaper-standard.png',
'https://eldenring.wiki.fextralife.com/file/Elden-Ring/elden-ring-wiki-screenshot-art-trailer5.jpg?v=1560119240021',
'https://pbs.twimg.com/media/D9oueVsX4AAW3Wk.jpg',
'https://pub-static.haozhaopian.net/static/web/appv2/images/landscape29bb2ef5b72f60c71199d5c22c979eadc.jpg',
'https://images.unsplash.com/photo-1462899006636-339e08d1844e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',
'https://picjumbo.com/wp-content/uploads/free-stock-images-1080x720.jpg',
'https://destinations.com.ua/storage/crop/articles/avatar_291_max.jpg',
'https://get.wallhere.com/photo/sunlight-women-outdoors-women-model-portrait-blonde-long-hair-nature-photography-dress-Xenia-Kokoreva-river-fashion-hair-white-clothing-spring-Person-skin-clothing-supermodel-girl-beauty-season-woman-lady-photograph-blond-portrait-photography-photo-shoot-brown-hair-art-model-320309.jpg'
];
const suffelImages = shuffle(images);
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
divs.forEach((div, i) => {
div.innerHTML = `<img src="${suffelImages[i]}" />`;
});
// CSS
img {
width: 300px;
height: 300px;
}

Your HTML is invalid. HTMLDivElement does not have a valueattribute. Use data-value instead.
Here's an example. For the sake of simplicity, this inserts <hr /> instead of images. Adjust at your own pleasure.
const imageDivs = document.querySelectorAll('#Image .ImageHere');
document.getElementById('foo').addEventListener('click', insertRandomHr)
function insertRandomHr() {
imageDivs[Math.floor(Math.random()*imageDivs.length)].innerHTML += '<hr />';
}
#Image { width: 100%; }
.ImageHere::before { content: attr(data-value); }
<table id="Image">
<tr>
<td>
<div class="ImageHere" data-value=1></div>
</td>
<td>
<div class="ImageHere" data-value=2></div>
</td>
<td>
<div class="ImageHere" data-value=3></div>
</td>
<td>
<div class="ImageHere" data-value=4></div>
</td>
<td>
<div class="ImageHere" data-value=5></div>
</td>
</tr>
<tr>
<td>
<div class="ImageHere" data-value=6></div>
</td>
<td>
<div class="ImageHere" data-value=7></div>
</td>
<td>
<div class="ImageHere" data-value=8></div>
</td>
<td>
<div class="ImageHere" data-value=9></div>
</td>
<td>
<div class="ImageHere" data-value=10></div>
</td>
</tr>
</table>
<button id="foo" type="button">Insert <hr /> into random div</button>
Hint: If the sole reason to have those invalid value attributes in the first place was to use that for randomly assigning the image to a div, you don't need that.

You can first define array of your images which need to be inserted , then make this array arrange values randomly , then using .forEach JS function Or .each JQuery Function to loop and insert these images into your table randomly
let's start with this code and read my comments on it to understand what i mean better
var images= ['image1.jpg','test.png','logo.png'] // array of your images
var randomArr = [] // new empty array which will have random values
for(var i= 0 ; i < images.length;i++){
var item = images[Math.floor(Math.random() * images.length)]
// this condition to prevent doublicate elements
if(!randomArr.includes(item)){
randomArr.push(item)
}else{
i = i - 1;
}
}
// now we have new array with random images
// lets start to insert these images into table
$("table#Image .ImageHere").each(function(index, value){
if(index > randomArr.length) {
// check if elements more than array of images and set default image
$(this).html("<img src='default.jpg' />")
}else{
$(this).html("<img src='"+randomArr[index]+"' />")
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table id="Image">
<tr>
<td><div class="ImageHere" value=1>ddd</div></td>
<td><div class="ImageHere" value=2></div></td>
<td><div class="ImageHere" value=3></div></td>
<td><div class="ImageHere" value=4></div></td>
<td><div class="ImageHere" value=5></div></td>
</tr>
<tr>
<td><div class="ImageHere" value=6></div></td>
<td><div class="ImageHere" value=7></div></td>
<td><div class="ImageHere" value=8></div></td>
<td><div class="ImageHere" value=9></div></td>
<td><div class="ImageHere" value=10></div></td>
</tr>
</table>

One solution could be to generate a random index from all the image containers that you have created in your table cells. You could then insert a programmatically created image element in the image container located at the generated index.
Example:
// Returns a random index, from 0..max
const randomIndex = (max) => Math.floor(Math.random() * Math.floor(max));
// Returns an image element with a random image
const createImage = () => {
const el = document.createElement('img');
el.src = 'https://picsum.photos/100';
return el;
};
// List of all image containers
const containers = document.querySelectorAll('.ImageHere');
// Generate random index and add an image to the container at that index
const index = randomIndex(containers.length);
containers[index].appendChild(createImage());
table {
border-collapse: collapse;
}
td {
width: 100px;
height: 100px;
border: 1px solid black;
padding: 0;
}
img {
display: block;
}
<table id="Image">
<tbody>
<tr>
<td>
<div class="ImageHere"></div>
</td>
<td>
<div class="ImageHere"></div>
</td>
<td>
<div class="ImageHere"></div>
</td>
<td>
<div class="ImageHere"></div>
</td>
<td>
<div class="ImageHere"></div>
</td>
</tr>
<tr>
<td>
<div class="ImageHere"></div>
</td>
<td>
<div class="ImageHere"></div>
</td>
<td>
<div class="ImageHere"></div>
</td>
<td>
<div class="ImageHere"></div>
</td>
<td>
<div class="ImageHere"></div>
</td>
</tr>
</tbody>
</table>

document.querySelectorAll('.ImageHere').item(n)
or
$('.ImageHere').eq(n)
where n is the index of a random number.

Trying to make an html checkbox which adds a number to an output field

I am trying to create a table in which when I check a box, if the image displayed is yes.jpg, a number gets added in the output box at the bottom of the column. If not, no number gets added. There are three columns, and each checkbox affects three images and so three output boxes. Here is my code.
<html>
<head>
<script>
function onSelect(rowId)
{
var row = document.getElementById(rowId);
var checkBox = row.getElementsByTagName("checkRow")[0];
var outputRow = document.getElementById("outputRow");
var totalRow1 = outputRow.getElementById("total1");
var totalRow2 = outputRow.getElementById("total2");
var totalRow3 = outputRow.getElementById("total3");
//If box is checked, check images. If they are yes, edit boxes.
if (checkBox.checked)
if (row.getElementById.("image1").src.indexOf(yes.png) > -1)
{
totalRow1.innerHTML = "dfd";
}
else {
//checkBox =
}
}
/*function onCheck()
{
var total1 = document.getElementById("total1");
window.alert("sometext");
total1.innerHTML = "dfd";
} */
</script>
</head>
<body>
<table border="1">
<tr> <!-- Table Header -->
<td>
Checkbox
</td>
<td>
Items
</td>
<td>
Area 1
</td>
<td>
Area 2
</td>
<td>
Area 3
</td>
</tr>
<tr id="checkRow"> <!-- Row 1 -->
<td>
<form>
<input type="checkbox" name="Row1" value="Row1" onclick="onCheck();">
</form>
</td>
<td>
Item
</td>
<td id="image1">
<img src="yes.png" alt="Needed">
</td>
<td id="image2">
<img src="yes.png" alt="Needed">
</td>
<td id="image3">
<img src="no.png" alt="Needed">
</td>
</tr>
<tr id="outputRow"> <!-- Table Bottom -->
<td>
<!--Empty-->
</td>
<td>
Summation
</td>
<td id="total1">
Area 1
</td >
<td id="total2">
Area 2
</td>
<td id= "total3">
Area 3
</td>
</tr>
</table>
</body>
Currently, I am just trying to edit the output text on one of the output boxes (as seen in my onCheck() method). However, even this does not seem to work. I added an alert, which does not happen either. What am I doing wrong?

there are so many things, you are doing wrong,
firstly, you have called onCheck() function upon click on your checkbox, but there is not such javascript function. you have onSelect(id) instead.
second, you are trying to .getElementById your TDs as those ids, 'image1' and all are ids of tds and not imgs
and then you are accessing .src for them, so anyway that is wrong.
Improvements:
change your input checkbox to this:
<input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);">
what you are doing is that, you are passing reference of your input in the function onCheck(this);
2. now change your markup like this:
<td>
<form>
<input type="checkbox" name="Row1" value="Row1" onchange="onCheck(this);">
</form>
</td>
<td>
Item
</td>
<td >
<img id="image1" src="yes.png" alt="Needed">
</td>
<td >
<img id="image2" src="yes.png" alt="Needed">
</td>
<td >
<img id="image3" src="no.png" alt="Needed">
</td>
</tr>
all i've done is to provide IDs to the right elements i.e. to the IMGs, instead of TDs;
thirdly, make your onCheck() like this:
function onCheck(cb)
{
if(cb.checked===true)
{
if(document.getElementById('image1').src.toString().indexOf('yes')>0){
document.getElementById('total1').innerHTML='555';
}
else
{
document.getElementById('total1').innerHTML='No';
}
if(document.getElementById('image2').src.toString().indexOf('yes')>0){
document.getElementById('total2').innerHTML='555';
}
else
{
document.getElementById('total2').innerHTML='No';
}
if(document.getElementById('image3').src.toString().indexOf('yes')>0){
document.getElementById('total3').innerHTML='555';
}
else
{
document.getElementById('total3').innerHTML='No';
}
}
}
so basically onCheck is pretty much same as your one.
now , see this working fiddle, i've made for you, it works. ofcourse I hate the way you are doing it all. This all can be done in a much easier way.
also, learn about jQuery, it makes life easy.

Javascript table menu opens up with all tables already collapsed, why?

I have a simple menu with collapsing tables, working with Javascript. My problem is when I open it in the browser it comes up with all tables already collapsed! How can I open it with the menu sections "closed", to then collapse each section only onclick? I know it's in the Javascript but I'm new to it so bear with me... Thank you!
Here's the basic code:
<head>
<script>
function doCollapse(rowname)
{
theElement = document.getElementById(rowname);
if(theElement.style.display == 'none'){
theElement.style.display = '';
}else {
theElement.style.display = 'none';
}
return false;
}
</script>
</head>
<body>
<table>
<tr>
<td>
<p1 onClick=" doCollapse ('r1');">JQ</p>
</td></tr>
<tr>
<td id="r1">ver biografia</td></tr>
<tr>
<td>
<p2 onClick=" doCollapse ('r2');">Obras</p>
</td>
</tr>
<tr>
<td id="r2">lista</td></tr>
<tr>
<td>
<p3 onClick=" doCollapse ('r3');">Exposições</p>
</td>
</tr>
<tr>
<td id="r3">lista</td></tr>
</table>
</body>
</code>

Since you are using pure javascript and not a library like jquery, I'd suggest a couple of modification to easily target your elements. Try to put the items to show and hide inside a span so you can use document.getElementsByTagName and then add the Id to those spans rather than on td. My concern was that you have more td in your code, so you using document.getElementsByTagName would affect them as well, which is not what you need. However, you need to be careful that my solution would also suffer from that side effect if you have more spans in your code, which is likely, so you need to take this consideration before you implement this live. Here is the code and you can see a live demo here
<head>
<script>
function init(){
var numberOfRows = document.getElementsByTagName('span').length;
for (var i = 0; i < numberOfRows; i++){
document.getElementsByTagName('span')[i].style.display = 'none';
}
}
function doCollapse(rowname)
{
theElement = document.getElementById(rowname);
if(theElement.style.display == 'none'){
theElement.style.display = 'inline';
}else {
theElement.style.display = 'none';
}
return false;
}
</script>
</head>
<body onload="init()">
<table>
<tr>
<td>
<p onClick=" doCollapse ('r1');">JQ</p>
</td></tr>
<tr>
<td><span id="r1">ver biografia</span></td></tr>
<tr>
<td>
<p onClick=" doCollapse ('r2');">Obras</p>
</td>
</tr>
<tr>
<td><span id="r2">lista</span></td></tr>
<tr>
<td>
<p onClick=" doCollapse ('r3');">Exposições</p>
</td>
</tr>
<tr>
<td><span id="r3">lista</span></td></tr>
</table>

HTML input popup calendar issue

I am trying to pop a calendar control when a user clicks on an input field. The calendar control is actually a div section for calendar which I am trying to toggle the display. The issue is when I click on the input, the calendar does not show up. But the catch is, when I change the position property of input from "relative" to "fixed", then the calendar shows up but relative to the browser. I want it to be displayed relative to the input field.
<script>
function showCalendar(startDate)
{
try{
//var inputElement = document.getElementById(startDate);
var inputElement = document.getElementsByName(startDate)[0];
var divCalendar = document.getElementById('calendar');
var divContent = document.getElementById('content');
if(divCalendar.style.display == 'block')
{
divContent.appendChild(divCalendar);
//inputElement.style.position='fixed';
//divCalendar.style.position='fixed';
divCalendar.style.display = 'none';
//divCalendar.style.zindex = 0;
}
else
{
divCalendar.parentNode.removeChild(divCalendar);
inputElement.appendChild(divCalendar);
inputElement.style.position='relative';
divCalendar.style.position='absolute';
divCalendar.style.top=30;
divCalendar.style.left=30;
//divCalendar.style.zindex = 100;
divCalendar.style.display = 'block';
}
}
catch(e)
{
alert(e);
}
}
</script>
<body>
<div id="content">
<table id="bookingTable">
<tr>
<th colspan="4">Book Rentals</th>
</tr>
<tr>
<th colspan="4"><%=fileService.title%></th>
</tr>
<tr>
<td style="text-align:right;">Start Date</td>
<td style="text-align:left;">
<input style="cursor:pointer;" type="text" name="startDate" value="" onclick="showCalendar('startDate')">
</td>
<td style="text-align:right;">Start Time</td>
<td style="text-align:left;"><input type="text" name="startTime" value=""></td>
</tr>
<tr>
<td style="text-align:right;">End Date</td>
<td style="text-align:left;">
<input style="cursor:pointer;" type="text" name="endDate" value="" onclick="showCalendar('endDate')">
</td>
<td style="text-align:right;">End Time</td>
<td style="text-align:left;"><input type="text" name="endTime" value=""></td>
</tr>
<tr>
<td colspan="4" style="text-align: center;">
<input type="submit" class="button" name="submit" value="Add" />
</td>
</tr>
</table>
<div id="calendar" style="display: none;">
Here is create a table dynamically which represent a calendar and which I am trying to toggle the display.
</div>
</div>

Try using this Javascript:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
And this HTML on your button that is toggling the calendar:
onClick="toggle_visibility('calendar');"
This simply displays/hides the div container with the ID of 'calendar'. You might have to put the calendar script itself inside your div, given that you don't need to pass variables to it via a control.