I want to change the content of the cell in the table by pressing the button, without using input textbox.
What should I use to do it?
Thanks!
Here's my code:
`
var images = new Array();
var i=0;
images[0] ="1.jpg";
images[1] ="2.jpg";
images[2] ="3.jpg";
images[3] ="4.jpg";
names = ["New York", "Nagasaki", "Nottingham", "Netherlands"]
function next(){
if(i>=images.length){
i=0;
document.getElementById('names').value=names[i];
document.getElementById('img').src=images[i];
i++;
}
else{
document.getElementById('img').src=images[i];
document.getElementById('names').value=names[i];
i++;
}
}
</script>
</head>
<body><center>
<h3>LabExercise3</h3>
<h2>By <i><b><u>Nurbek Zhapar</u></b></i></h2></center>
<form>
<h1>Around the World</h1><br/>
<hr/>
<br/>
<table align="center">
<tr><td><input type="text" value="" id="names" readonly="readonly"/></td></tr>
<tr><td><p style="text-align:center;">
<img src="1.jpg" alt="" id="img"/>
</p></td></tr></table>
<table align="center">
<tr>
<td><input type="button" value=" Next " onclick="next()" /></td>
</tr>
</table>
</form>`
I want to replace input textbox that I used here to display Country names by something else, or show Country names in other way. Thanks!
You can add a <span id="name"></span> inside the table cell, and update document.getElementById("name").textContent instead of the textbox.
You also ought to think about your HTML and JavaScript. There are quite a few things you're using that are deprecated.
See http://jsfiddle.net/3sEYq/.
Related
I have written the below code to display a selection of images within a tag when a certain button is clicked on a page. The Jquery to hide the elements on page load works, but the rest of the code does nothing. Can anyone help me figure this out please?
$(document).ready(function(){
//Create Array for images
var vanImgArr = new Array("<img src='img\yvr\coalharbour.jpg'>", "<img src='img\yvr\lgbridge.jpg'>", "<img src='img/yvr/yaletown.jpg'/>", "<img src='img\yvr\lgbridge2.jpg'>");
var sgpImgArr = new Array("<img src='img\sgp\elginbridge.jpg'>", "<img src='img\sgp\mbfc.jpg'>", "<img src='img\sgp\sgpdusk.jpg'>", "<img src='img\sgp\sgppano.jpg'>");
var aniImgArr = new Array("<img src='img\ani\cat1.jpg'>", "<img src='img\ani\cat2.jpg'>", "<img src='img\ani\dog1.jpg'>", "<img src='img\ani\tandd.jpg'>");
var absImgArr = new Array("<img src='img\abs\abs1.jpg'>", "<img src='img\abs\abs2.jpg'>", "<img src='img\abs\abs3.jpg'>", "<img src='img\abs\abs4.jpg'>");
var clickedId;
var idx = 0;
//to display images
function displayImgs(arr)
{
if(idx <= arr.length)
{
('#pic').hide();
('#pic').html(arr[idx]);
('#pic').fadeIn('slow');
if(idx > arr.length)
{
idx = 0;
}
else
{
idx++;
}
}; //button click close
}//displayImgs method close
//on page load
$('p').hide();
//More info Action
$('#more').hover(function(){
$('#info, #info2').fadeIn('slow');
});
//Button Click Action
$(':button').click(function(){
clickedId = this.id;
alert(clickedId); //testing
switch(clickedId)
{
case 'yvr':
displayImgs(vanImgArr);
break;
case 'sgp':
displayImgs(sgpImgArr);
break;
case 'ani':
displayImgs(aniImgArr);
break;
case 'abs':
displayImgs(absImgArr);
break;
}//switch/case close
});//button click close
});
Here is my HTML code to go with the above
<!DOCTYPE html>
<title>Ricky Deacon CSIS3380-001, Assignment 2, Summer 2017</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
<table class="t1">
<tr>
<th width="25%" rowspan="3"><img src="img\rick2.JPG" alt="RD portrait goes here"></th>
<th width="50%" colspan="2">Rick Deacon</th>
<th width="25%" rowspan="3"><img src="img\rick1.JPG" alt="RD portrait goes here"></th>
</tr>
<tr>
<td id="subtitle" colspan="2">Photography Showcase</td>
</tr>
<tr>
<td id="desc" colspan="2">Click the corresponding button to display images from your chosen category.</td>
</tr>
</table>
<br/>
<br/>
<table class="t2">
<tr>
<th>
<input id="van" type="button" name="submit" value="Show Vancouver Images"/>
</th>
<th>
<input id="sgp" type="button" name="submit" value="Show Singapore Images"/>
</th>
<th>
<input id="ani" type="button" name="submit" value="Show Animal Images"/>
</th>
<th>
<input id="abs" type="button" name="submit" value="Show Abstract Images"/>
</th>
</tr>
<tr>
<th>
<p id="info">Rick Deacon's Flickr</p>
</th>
<th colspan="2">
<h1 id="more">More Info and Portfolio Links</h1>
</th>
<th>
<p id="info2">Prints For Sale</p>
</th>
</tr>
</table>
<br/>
<br/>
<p id="pic" align="center">Image Goes Here</p>
I think you've forgotten about the $ sign on your code.
Your display function should be like this
function displayImgs(arr){
if(idx <= arr.length)
{
$('#pic').hide();
$('#pic').html(arr[idx]);
$('#pic').fadeIn('slow');
if(idx > arr.length)
{
idx = 0;
}
else
{
idx++;
}
}; //button click close
}//displayImgs
Also, shouldn't you use one idX for each array?
Your JavaScript refers to elements which don't exist in your markup.
First, there are no elements with the id of "more", so the "More Info" action will never run. Second, you are targeting a button element in your "Button Click" action, but I see no button elements either--just <input type="button" />, which you must specify using $(":button, input[type='button']") (Either one of those two selectors will work).
You are selecting button tag while there is no button tag in your html. You should select input tag using $('input[type="button"]')
but this might not be good practice at the time of debugging so you should assign input tag a name and then select them using
$('input[name="elementname"]').
Second .In "this.id" is not proper syntax you should use $(this).attr('id');
I'm atm working on getting a dynamic table into an html page with a button on every table row's first column to display a description of an item(it's an itemlist).
however when setting the innerhtml with an onclick event i am not able to fire an alert .When i want to call another JS function to call the alert and trying to pass an argument in my onclick function it wont do nothing, when trying to escape the quotes nothing works.
Javascript
function showAuctionList(auctionList){
var table = document.getElementById("myTableData");
for(var i = 0 ; i< auctionList.length ; i++){
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var description = auctionList[i].itemDesc;
row.insertCell(0).innerHTML= '<input type="button" value = "Show Description" onclick="showDescription( description)">';
row.insertCell(1).innerHTML= auctionList[i].auctionId;
row.insertCell(2).innerHTML= auctionList[i].sellId;
row.insertCell(3).innerHTML= auctionList[i].startDate;
row.insertCell(4).innerHTML= auctionList[i].endDate;
row.insertCell(5).innerHTML= auctionList[i].buyNow;
row.insertCell(6).innerHTML= auctionList[i].minBid;
row.insertCell(7).innerHTML= auctionList[i].actualBid;
row.insertCell(8).innerHTML= auctionList[i].itemCat;
row.insertCell(9).innerHTML= auctionList[i].itemName;
row.insertCell(10).innerHTML= auctionList[i].itemDesc;
}
}
function showDescription(desc){
alert(desc);
}
HTML
<div id="search" style="display:none">
<button id="searchButton" onclick="
google.script.run.withSuccessHandler(showAuctionList).getAuctionList()"> Search </button> <br>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Auction ID</b></td>
<td><b>Seller ID</b></td>
<td><b>Start Date</b></td>
<td><b>End Date</b></td>
<td><b>Buy now option</b></td>
<td><b>Min Bid</b></td>
<td><b>Actual Bid</b></td>
<td><b>Category</b></td>
<td><b>Item Name</b></td>
<td><b>Description</b></td>
</tr>
</table>
<br/>
</div>
gs function call:
function doget(e){
...
return HtmlService.createTemplateFromFile('Main').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
can this be escaped that description works as an parameter or whats the workaround about the issue?The rest works perfectly fine though
Try this. As description seems to be a string value you need to surround it with qoutes.
row.insertCell(0).innerHTML = '<input type="button" value = "ShowDescription" onclick="showDescription(\'' + description + '\');">';
You need not escape if use this code:
row.insertCell(0).innerHTML= '<input type="button" value = "Show
Description" onclick="showDescription(this.getAttribute(\'description\'))">';
row.cells[0].firstChild.setAttribute('description', description);
I'm trying to retrieve the entered text in each textbox, by querying and looping through by ID tag.
But when I print what I have retrieved it outputs "undefined".
Looks like your post is mostly code:
</head>
<body bgcolor="#E6E6FA">
<font color=black size=+3>Modifying Sentiment</font>
<table>
<tr>
<td>Text to Save:</td>
</tr>
<tr>
<td colspan="3">
Add positive adjective:
<img Adjective src="http://findicons.com/files/icons/2776/android_icons/96/ic_question_mark.png" alt="question" title="Adjective: is a word naming an attribute of a noun, such as sweet, red, or technical."
width=20 />
<br>
<textarea cols=40 rows=3 id="textbox" ></textarea>
<textarea id="textbox" style="width:512px;height:256px"></textarea>
</td>
</tr>
<tr>
<td>Filename to Save As:</td>
<td><input id="inputFileNameToSaveAs"></input></td>
<td><button onclick="saveTextAsFile()">Save Text to File</button></td>
</tr>
<tr>
<td>Select a File to Load:</td>
<td><input type="file" id="fileToLoad"></td>
<td><button onclick="loadFileAsText()">Load Selected File</button>
<td>
</tr>
</table>
<script type='text/javascript'>
function saveTextAsFile(){
var textBoxes = document.querySelectorAll('textbox');
var textToWrite;
for(var i in textBoxes){
textToWrite = textBoxes[i].value;
window.alert(textToWrite);
}
var textToWrite = document.getElementById("textbox").value;
var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
}
</script>
I have edited your javascript to point to textarea instead of textbox.
I also modified your for loop as I was getting additional outputs in the console. I also changed your alert to a console.log as jsbin was throwing an error of possible endless loop.
Try this:
function saveTextAsFile()
{
var textBoxes = document.querySelectorAll('textarea');
var textToWrite;
for(var i = 0; i < textBoxes.length; ++i){
textToWrite = textBoxes[i].value;
console.log(textToWrite);
}
textToWrite = document.getElementById("textarea").value;
var textFileAsBlob = new Blob([textToWrite],{type:'text/plain'});
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
}
Trying using #textbox as this refers to the ID of the dom elements
Actually each id value in an html document should be unique. In your HTML code, I can see two id parameter with the same value "textbox". Try to change the first to "textbox-1" or whatever make sense to you but don't repeat the same value for id property and it should work.
I am trying to get my button selections to display in a table on my web application. Bellow you find the pieces of code that relate to my 1. My function which allows for the selections (may not even be relevant..), 2. the buttons which you can select in order to set the parameters, and 3 the table with class name and the rows where they will go. I've been struggling with this! Please Help!
My function:
function setClip(val)
{
clip=val;
}
function setZoom(val)
{
zoom=val;
}
function geoMap(val)
{
gmap=val;
}
function swap(imgNumber)
{
if(clip==true & zoom==false & gmap==false)
document.getElementById("default").src=imgNumber+"clip.jpg";
else if(clip==false & zoom==true & gmap==false)
document.getElementById("default").src=imgNumber+"zoom.jpg";
else if(clip==false & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"zoomp.jpg";
else if(clip==true & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"clipzoomp.jpg";
else if(clip==true & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"clipp.jpg";
else if(clip==true & zoom==true & gmap==false)
document.getElementById("default").src=imgNumber+"clipzoom.jpg";
else if(clip==false & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"p.jpg";
else
document.getElementById("default").src=imgNumber+".jpg";
}
My Buttons:
<input type ="button" id="button3" value="Apply Mask" onclick="setClip(true)">
<input type ="button" id="button3" value="No Mask" onclick="setClip(false)">
<input type="button" id="button3" value="Maintain Zoom In" onClick="setZoom(true)">
<input type="button" id="button3"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" id="button3" value="GeoMap On" onClick="geoMap(true)">
<input type="button" id="button3" value="GeoMap Off" onClick="geoMap(false)">
The table I would like my selections to be displayed in, basically I want the values of the selected buttons to but put in the table after they have been selected
<table class="status" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr>
</table>
I think your best bet here is using jQuery. It's far easier to manipulate than Javascript and was designed to easily manipulate objects. If you know CSS and a little Javascript, it's easy to pick up too. You don't even have to host it, as Google hosts it. All you need to do is add the following source code to the top where your scripts are:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var buttonCount=1;
$(document).ready(function() {
$("input[type='button']").click(function() {
if(buttonCount <= 3) {
//make sure that there are no duplicates
if($(this).get(0).className != "buttonUsed")
{
$(this).get(0).className = "buttonUsed";
var htmlString = $(this).attr('value');
$('#sel' + buttonCount).html(htmlString);
buttonCount++;
}
}
});
});
... The rest of your script
I notice that you have been using IDs like one might use classes. I would advise you to consider using the class attribute for things like "button" and make IDs more unique. It will make it easier to code with Javascript, as JS usually follows IDs and works best if it targets only one element per ID. In any case I did rename your IDs. If you have CSS you can rename your CSS classes. Just note that in my code I renamed a class so that you can't choose more than one. That might work for you anyway, because then your button that has been used can look different from the unused buttons.
Anyway, here is the HTML, adapted:
<table class="status" id="buttonStatus" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr><tr>
<td width="200" align="center" id="sel1"> </td>
<td width="200" align="center" id="sel2"> </td>
<td width="200" align="center" id="sel3"> </td>
</tr>
</table>
</body>
Let me know if this works.
Update
To edit as you desire, use this:
$(document).ready(function() {
$("input[type='button']").click(function() {
//make sure that there are no duplicates
var buttonClassName = $(this).get(0).className;
if(buttonClassName != "buttonUsed")
{
var buttonID = $(this).attr('id');
var firstPart = buttonID.substring(0,6);
var secondPart = buttonID.substring(6,7);
var thirdPart = buttonID.substring(7);
var newThirdPart;
switch(thirdPart)
{
case "a" : newThirdPart = "b"; break;
case "b" : newThirdPart = "a"; break;
}
$(this).get(0).className = "buttonUsed";
$("#" + firstPart + secondPart + newThirdPart).get(0).className = "button";
var htmlString = $(this).attr('value');
$('#sel' + secondPart).html(htmlString);
}
});
});
And the HTML
<body>
<input type ="button" class="button" id="button1a" value="Apply Mask" onclick="setClip(true)">
<input type ="button" class="button" id="button1b" value="No Mask" onclick="setClip(false)">
<input type="button" class="button" id="button2a" value="Maintain Zoom In" onClick="setZoom(true)">
<input type="button" class="button" id="button2b"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" class="button" id="button3a" value="GeoMap On" onClick="geoMap(true)">
<input type="button" class="button" id="button3b" value="GeoMap Off" onClick="geoMap(false)"><BR><BR><BR>
<table class="status" id="buttonStatus" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr><tr>
<td width="200" align="center" id="sel1"> </td>
<td width="200" align="center" id="sel2"> </td>
<td width="200" align="center" id="sel3"> </td>
</tr>
</table>
</body>
Note on CSS
This JQuery changes the classname of the active button to buttonUsed, which means you can create a CSS to make the button look highlighted. If you'd rather not do that, and would rather have everything stay as button, you don't actually need it in the new example (whereas in my initial stab at it, it was very necessary).
$(document).ready(function() {
$("input[type='button']").click(function() {
//make sure that there are no duplicates
var buttonID = $(this).attr('id');
var secondPart = buttonID.substring(6,7);
var htmlString = $(this).attr('value');
$('#sel' + secondPart).html(htmlString);
});
});
Much simpler, in fact. At least I showed you the sort of things jQuery is capable of. Whether you choose to use it or not is up to you. Happy coding!
I have a problem with adding OPTIONS to SELECT tag dynamically.
Here is my code of Job.html:
<body onload="javascript:onPageLoad();">
<div id="JobForm" data-role="page">
<div class="logoHeader"><img src="images/header.png" /></div>
<div data-role="header" data-position="fixed">
<h1>Load<span id="JobHeader"></span></h1>
</div>
<div class="lineBreak20"></div>
<div class="rightContent divContent">Welcome<em id="lblName"></em></div>
<div class="lineBreak40"></div>
<div class="boldText divContent">Please select the Job</div>
<div class="lineBreak20"></div>
<div class="roundBox">
<table>
<tr>
<td class="tdLabel">Job No: </td>
<td><select id="ddJNo" class="fieldWidth" data-mini="true"></select>
</td>
</tr>
<tr>
<td></td>
<td><button id="btnLd" type="submit" data-theme="a" data-inline="true" data-mini="true">Load</button></td>
</tr>
</table>
</div>
</div>
</body>
and the Javascript is:
function onPageLoad() {
var lsJobs= window.localStorage.getItem("jobs");
var arrJobs= lsJobs.split(",");
for (var i=0;i< arrJobs.length;i=i+2)
{
if((arrJobs[i]!=""))
{
$("#ddJNo").append("<option value='"+ arrJobs[i] +"'>" + arrJobs[i+1] + "</option>");
}
}
document.getElementById("lblName").innerHTML =window.localStorage.getItem("name");
}
Is there any error in the code? Here the problem is when i click the Select option, the drop-down list is not showing. Please share ur ideas in implementing the SELECT options dynamically either using JAVASCRIPT or JQUERY.
UPDATE: But while placing the window.localStorage content in alert Dialog, it works fine. I think there is a problem with JS Function. Please help me...
Try this,
var newOption = $("<option />");
$("#ddlJobNo").append(newOption);
newOption.val(arrJobs[i]);
newOption.html(arrJobs[i+1]);
See example here.