i want to place an image inside the cell on the first click and another image on the second click at the same position. In order to do that i tried writing onclick function in the tag..but as its written within functions it wont work..is there any other way to achieve the need ? plz help?
JS for placing the images on click:-
function changeColor1(elem)
{
elem.innerHTML = '<img src="images/atom1.png" width="20px" height="20px" onclick=changecolor2(this) />';
//alert("Row Index is:"+elem.parentNode.rowIndex+elem.cellIndex);
var x= elem.cellIndex;
var y= elem.parentNode.rowIndex;
click_count(x,y);
}
function changeColor2(elem)
{
elem.innerHTML = '<img src="images/2circles.png" width="20px" height="20px" onclick=changecolor3(this) />';
//alert("Row Index is:"+elem.parentNode.rowIndex+elem.cellIndex);
var x= elem.cellIndex;
var y= elem.parentNode.rowIndex;
click_count(x,y);
}
code for making the grid:
$rows = 7; // define number of rows
$cols = 6;// define number of columns
echo "<center>";
echo "<table border='1' cellspacing=0 cellpadding='35' pixels'>";
for($tr=0;$tr<$rows;$tr++){
echo "<tr>";
for($td=0;$td<$cols;$td++){
echo "<td onclick=\"changeColor1(this)\" >   </td>";
}
echo "</tr>";
Try this:
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function changeColor2(elem)
{
if(!hasClass(elem, 'clicked')){
//clicked first time
elem.className = elem.className + " clicked";//add clicked class to element on first click
elem.innerHTML = '<img src="images/2circles.png" width="20px" height="20px" onclick=changecolor3(this) />';
//alert("Row Index is:"+elem.parentNode.rowIndex+elem.cellIndex);
var x= elem.cellIndex;
var y= elem.parentNode.rowIndex;
click_count(x,y);}
else{
//clicked second time and onward
}
}
Related
JS:
function add(){
while(i < $('.tabledata').length){
var current_val = $('.tabledata').eq(i).text();
arr.push(current_val);
$('.tabledata').eq(i).text() = "<img src='/flags/'" + (flagsarr[current_val].toLowerCase() + '.png') + ' width="20px" style="margin-bottom: 2px;"><b>' + current_val + '</b>';
i++;
}
}
$(document).ready(function(){ add(); });
current_val is a Country. flagsarr[curren_val] is the country code: eg ES (Spain).
in this case, i want to add 'es.png' before the text 'Spain' in the table.
I tried using text() but I realised it was a function.
Please note: there are around 200 rows in the table, each with 5 pieces of data (so 5 columns), the first being the Country. Each of the first column items share the class 'tabledata'.
How can I fix this?
You can use each to iterate over tabledata and html() instead of text() to get its content:
function add() {
var $tableData = $('.tableData');
$.each($tableData, function(index, value){
var current_val = $(value).html();
arr.push(current_val);
$(value).html("<img src='/flags/'" + flagsarr[current_val].toLowerCase() + ".png'" + ' width="20px" style="margin-bottom: 2px;"><b>' + current_val + '</b>');
});
}
$(document).ready(function(){ add(); });
Here's the code I have so far but it all makes the first baloon change and id like each div id clicked to supply the output to the div clicked. Not sure if I can combine this in an easy function or should I make 1 function for each div separately.
document.getElementById("baloon1").addEventListener("click", eggBasket);
document.getElementById("baloon2").addEventListener("click", eggBasket);
document.getElementById("baloon3").addEventListener("click", eggBasket);
function eggBasket(){
var dispImages = new Array ();
dispImages[1] = "images/1.png";
dispImages[2] = "images/2.png";
dispImages[3] = "images/3.png";
dispImages[4] = "images/4.png";
var rnd = Math.floor( Math.random() * dispImages.length );
if( rnd == 0 ) {
rnd =1;
}
if (document.getElementById("baloon1")){
document.getElementById("baloon1").innerHTML = "<img src='" + dispImages[rnd] + "'/>";
}
else if (document.getElementById("baloon2")){
document.getElementById("baloon2").innerHTML = "<img src='" + dispImages[rnd] + "'/>";
}
else if (document.getElementById("baloon3")){
document.getElementById("baloon3").innerHTML = "<img src='" + dispImages[rnd] + "'/>";
}
}
This is all in a scripts.js file being called to the php page.
Corrected the function name
Heres the html
echo'
<div id="baloon1">
<img src="' . $randomImage . '">
</div>
<div id="baloon2">
<img src="' . $randomImage2 . '">
</div>
<div id="baloon3">
<img src="' . $randomImage2 . '"/>
</div>';
Here, we bind to each egg, same method.
document.querySelectorAll('.egg').forEach(egg => {
egg.addEventListener("click", (event) => {
console.log(`you clicked on ${event.target.id}`);
});
});
<div id="egg1" class="egg"> Egg1 </div>
<div id="egg2" class="egg"> Egg1 </div>
<div id="egg2" class="egg"> Egg3 </div>
If you want each baloon to show a random image when clicked try something like this:
[].slice
// find all divs containing an id containing baloon
.call(document.querySelectorAll('[id*=baloon]'))
// loop through all found divs
.map(function(baloon) {
// array of images to be randomized
var images = [
'https://unsplash.it/100/?random=1',
'https://unsplash.it/100/?random=2',
'https://unsplash.it/100/?random=3',
'https://unsplash.it/100/?random=4'
];
// pick a random image
var image = images[Math.floor(Math.random() * images.length)];
// add image to current baloon div
baloon.innerHTML = '<img src="' + image + '">';
// add click listener to baloon div
baloon.addEventListener('click', function() {
// pick a new random image
var image = images[Math.floor(Math.random() * images.length)];
// add new image to current baloon div
baloon.innerHTML = '<img src="' + image + '">';
})
})
[id*="baloon"] {
width: 100px;
height: 100px;
float: left;
margin: 10px;
border: 1px solid #ccc;
}
<div id="baloon1"></div>
<div id="baloon2"></div>
<div id="baloon3"></div>
In response to comment (please note I'm not an expert on php)
<?php
// print out images from dir to js array
$images = array();
foreach (glob("/IMAGEPATH/*.{jpg,png,gif}", GLOB_BRACE) as $filename) {
$images[] = $filename;
}
echo "<script>var images=" . json_encode($images) . "</script>";
?>
From what I understand you are looking for, you want to pass the baloon's div ID to Basket to only modify that div.
document.getElementById("baloon1").addEventListener("click", function(){Basket('baloon1');});
document.getElementById("baloon1").addEventListener("click", function(){Basket('baloon2');});
document.getElementById("baloon1").addEventListener("click", function(){Basket('baloon3');});
function Basket(divId){
var dispImages = new Array ();
dispImages[1] = "images/1.png";
dispImages[2] = "images/2.png";
dispImages[3] = "images/3.png";
dispImages[4] = "images/4.png";
var rnd = Math.floor( Math.random() * dispImages.length );
if( rnd == 0 ) {rnd =1;}
document.getElementById(divId).innerHTML = "<img src='" + dispImages[rnd] + "'/>";
}
You can get all elements which id start with baloon like
var allElements = document.querySelectorAll('[id^="baloon"]')
for (var i = 0; i < allElements.length; i++) {
allElements[i].addEventListener('click', eggBasket)
}
function eggBasket(){
console.log('clicked')
}
<div id="baloon1" >baloon1</div>
<div id="baloon2" >baloon2</div>
<div id="baloon3" >baloon3</div>
I am trying to send an HTML email using MailApp.
This is the table where I will pull the data from:
After reading the documentations and posts on SO, I am still unable to pin point why the email sent out is showing undefined in the variables part.
Would appreciate if someone can point me to the right direction.
These are my codes:
sendHtmlEmail.gs
function sendEmails() {
var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var lastRow = ss.getLastRow();
var quotaLeft = MailApp.getRemainingDailyQuota();
if((lastRow-1) > quotaLeft){
Browser.msgBox("You have " + quotaLeft + " email quota left and you're trying to send " + (lastRow-1) + " emails. Emails were not sent.")
} else {
for (var row = 2; row <= lastRow; row++){
var currentEmail = ss.getRange(row, 4).getValue();
var currentContact = ss.getRange(row, 3).getValue();
var currentNewSize = ss.getRange(row,8).getValue();
var currentSub = ss.getRange(row, 9).getValue();
var returnData = [currentContact, currentNewSize, currentSub];
var html = HtmlService.createTemplateFromFile('htmlTemplate');
html.data = returnData;
var template = html.evaluate().getContent();
var subjectLine = "Important notice";
MailApp.sendEmail({to: currentEmail, subject: subjectLine, htmlBody: template});
} //close for loop
Browser.msgBox("You have successfully sent " + (lastRow-1) + " emails.")
} //close else statement
}
htmlTemplate.html
<!DOCTYPE html><html><head><base target="_top"></head><body style="text-align: center;font-family: Arial;">
<div id="center" style="width:300px;border: 2px dotted grey;background:#ececec;margin:25px;margin-left:auto;
margin-right:auto;padding:15px;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_Alert.svg/600px-Simple_Alert.svg.png"
width="180" style="margin:10px 0px"><br /><div style=" border: 2px dotted grey;background:white;margin-right:auto; margin-left:auto;
padding:10px;"><h2>Alert</h2><h3>Important Notice <br /><br />
+ <?= data.currentContact ?> + '<br />' + <?= data.currentNewSize ?> + '<br />' + <?= data.currentSub ?> + '<br /></h3></div></body></html>'
I know that it is something to do with the htmlTemplate data.currentNewSize etc, but after tweaking my codes they are still showing undefined as shown in the image.
You are using an array in the method while the template is expecting an object.
Replace
var returnData = [currentContact, currentNewSize, currentSub];
with
var returnData = {currentContact: currentContact, currentNewSize: currentNewSize, currentSub: currentSub}
The issue lies in the html code. As I have declared the array in sendHtmlEmail.gs, I did not call it correctly in my htmlTemplate.html.
In this line:
var returnData = [currentContact, currentNewSize, currentSub];
currentContact is in position 0, currentNewSize is in position 1 and so forth.
In the htmlTemplate.html, I need to replace this line:
+ <?= data.currentContact ?> + '<br />' + <?= data.currentNewSize ?> + '<br />' + <?= data.currentSub ?> + '<br /></h3></div></body></html>'
with this:
+ <?= returnData[0];?> + '<br />' + <?= returnData[1];?> + '<br />' + <?= returnData[2];?> + '<br /></h3></div></body></html>'
I am new to coding, and am facing an issue calling a function from innerhtml. I suspect the issue may be with the innerhtml syntax.
The problematic section is:
document.getElementById('arrowback').innerHTML = "<a href='#' onclick='return imtest(icount,imname);'><img src=/Images/ib/A2.png></a>";
If i change the the syntax to the below then it works for icount, which is a numeric value, not for imname:
document.getElementById('arrowback').innerHTML = "<a href='#' onclick='return imtest("+icount+");'><img src=/Images/ib/A2.png></a>";
I would like to call the imtest function with 2 variables through the innerhtml method. Below is the full code for reference:
<script type="text/javascript">
function clicker(buildname, imname, icount){
var displaybox=document.getElementById('displaybox');
if (displaybox.style.display === "none") {
alert(imname);
document.getElementById('imagebox').innerHTML = "<img src=" + imname + icount+".jpg height='400'>";
document.getElementById('arrowback').innerHTML = "<a href='#' onclick= 'return imtest(icount,imname);'><img src=/Images/ib/A2.png></a>";
document.getElementById('btitle').innerHTML = buildname;
} else {
document.getElementById('displaybox').style.display = "none";
}
return false;
}
function imtest(icount, imname) {
alert(icount);
}
</script>
You just need to add quotes around imname:
document.getElementById('imagebox').innerHTML = '<img src="' + imname + icount + '.jpg" height="400">';
document.getElementById('arrowback').innerHTML = '<img src="/Images/ib/A2.png">';
By the way, you forgot the quotes around both src attribute values, I've added them, and I've took the liberty of changing the quotes you use to have double quotes in your HTML.
See this codepen.
Working code...
Javascript
function imtest(icount, imname){
alert("icount:" + icount + "\n imname: " + imname);
}
function clicker(buildname,imname,icount){
var displaybox=document.getElementById('displaybox');
if(displaybox.style.display == "none"){
displaybox.style.display = "block";
document.getElementById('imagebox').innerHTML = "<img src='" + imname + icount+".jpg' height='400'>";
document.getElementById('arrowback').innerHTML = "<a onclick='return imtest(" + icount + "," + '"' + imname + '"' + ");'><img src='Images/ib/A2.png'></a>";
document.getElementById('btitle').innerHTML = buildname;
}else{
document.getElementById('displaybox').style.display = "none";
}
}
HTML
<div id="displaybox" style="display: none;">
<h1 id="btitle"></h1>
<div id="imagebox"></div>
<div id="arrowback"></div>
</div>
<button onclick="clicker('buildname', 'imname', 'icount');">Clicker</button>
In imtest function you are passing only one parameter and on onclick you are accepting two parameter.Check it
While accepting you shoulde write like this.
document.getElementById('arrowback').innerHTML = '<img src="/Images/ib/A2.png">';
This the page I'm working on:
http://gacc.nifc.gov/gbcc/predictive/PSA_ERCmap/Dev/PSAERCmap1.html
When you click on a shaded area the chart associated with the area pops up. What I'm trying to figure out is how to get the "Next PSA" link at the bottom to advance the chart in the popup to the next PSA every time you click it. I've figured out how to get it to advance by one PSA, but can't get it past that one. You'll see if you click on the link.
I have a function (called replace) that replaces the image source for the chart with a link to the next PSA number up. However, I can't figure out how to get it to increment. I tried PSA++ and PSA=PSA1 but neither of them work.
Here's my code:
<title>DEV PSA ERC Map DEV</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function overlay(a) {
PSA = a.id;
var numeric = a.id.replace('GB', '');
PSAnum = Number(numeric)
PSA1 = PSAnum + 1;
nextPSA = ('0' + PSA1).slice(-2);
var overlayContent = '';
overlayContent += '<div id="overlay">';
overlayContent += '<div>';
var imgsrce = '';
imgsrce += 'Charts/WebCharts/GB';
imgsrce += numeric;
imgsrce += '/ERCGraph.PNG';
overlayContent += '<img id="chartimage" src="';
overlayContent += imgsrce;
overlayContent += '" />';
overlayContent += '<br /><b><h1> Close</b></h1>';
overlayContent += '<b><h1> Next PSA</b></h1>';
overlayContent += '</div>';
overlayContent += '</div>';
$("#overlay").replaceWith(overlayContent);
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
if (el.style.visibility == "visible") {
//el.style.visibility="hidden";
}
} //end of overlay function
function replace(a) {
image = document.getElementById('chartimage');
console.log(image.src);
console.log(PSA);
image.src = 'Charts/WebCharts/GB';
image.src += nextPSA;
image.src += '/ERCGraph.PNG';
PSA++;
console.log(PSA);
} //end of replace function
$('.overlay-bg').click(function() {
closePopup();
});
function closePopup() {
el = document.getElementById("overlay");
el.style.visibility = "hidden";
}
$(function() {
$.get("getDate.php", function(data) {
document.getElementById("timestamp").innerHTML = "<b>RAWS observations updated on " + data + "</b>";
});
});
var file;
file = 'GB_PSAdata_Real.js';
$.getJSON(file, function(events) {
var gbname = Object.keys(events);
var divContent = '';
divContent += '<div id="map">';
divContent += '<map name="mapmap">';
for (i = 0; i < gbname.length; i++) {
var PSA = (gbname[i]);
JSONcoords = events[PSA][0].Coords;
JSONcoordString = JSONcoords.toString();
divContent += '<area id="' + PSA + '" href="#" shape="poly" coords="';
divContent += JSONcoordString;
divContent += '" onclick="overlay(this)">';
// console.log(divContent)
}
divContent += '</map>';
divContent += '<img src="GetPSAavg.php" width="826" height="1005" usemap="#mapmap" />';
divContent += '</div>';
$("#map").replaceWith(divContent);
//$("#overlay").replaceWith(overlayContent);
;
})
</script>
</head>
<div id="overlay">
</div>
<body>
<div id="header">
<img src="PSlogo.png" style="height:75px">
<img src="GBlogo.png" style="height:75px">
<span><b>Great Basin ERC Percentiles</b> *Experimental*</span>
</div>
<div id="main">
<div id="map"></div>
<div id="timestamp">RAWS Observations Updated</div>
<div id="legend">
<img src="LegendFull2.png" id="legendIMG">
</div>
</div>
</body>
</html>
You need to move the code that increments the number into the replace() function, so it gets executed each time replace() is called. Currently it is executed only once when the overlay() function is called.
First, explicitly declare a global variable (outside of any function):
var currentPSANum = null;
Place this line inside the overlay() function:
currentPSANum = Number(a.id.replace('GB',''));
Then use the following for the replace() function:
function replace(a) {
currentPSANum++;
var image = document.getElementById('chartimage');
image.src = 'Charts/WebCharts/GB' + ('0' + currentPSANum).slice(-2) + '/ERCGraph.PNG';
}