I want to dial a number on a image click.. for this I have dynamically created div tags which contains such images. but I need to double click on image everytime to make a call.
I think it is happening because on first click wrap function is called and on second click tel is being invoked. I want to make call on first click.please suggest an alternative for this.
My code is:
for(var i=0;i<len;i++)
{
var maindiv=document.createElement("div");
maindiv.setAttribute("id", "maintablediv");
var table=document.createElement("table");
table.setAttribute("class","numbertable" );
table.setAttribute("border",0);
table.setAttribute("cellSpacing","0");
table.setAttribute("cellPadding","0");
var rowCount = table.rows.length ;
var row =table.insertRow(rowCount);
row.id="row";
var cell1 = row.insertCell(0);
if(i==0)
{
cell1.setAttribute("id","cmdcentralno");
}
var cell2=row.insertCell(1);
var p=document.createElement("p");
p.innerHTML=desc[i];
cell1.innerHTML=num[i];
cell1.setAttribute("class","numbername");
cell1.appendChild(document.createElement("br"));
cell1.appendChild(p);
cell2.setAttribute("class","phoneImg");
var image=document.createElement("img");
image.setAttribute("src", "images/Icon-Phone-Green.png");
if(i==0)
{
cell2.setAttribute("id","cmdcentralimage");
}
image.setAttribute("id", "imgphn"+i);
image.className="imgphn";
// var number=num[i].substring(num[i].indexOf('>')+1,num[i].indexOf('>')+14);
image.setAttribute("name", dialnum[i]);
cell2.appendChild(image);
image.setAttribute("align","centre");
maindiv.appendChild(table);
document.getElementById("numberMenu").appendChild(maindiv);
image.onclick=function()
{
var cellnumber=$(this).attr("name");
$(this).wrap("<a href =tel:"+cellnumber+"/>");
}
}
});
Untested, but I expect this should solve your problem...
// move this outside of the click handler (and use `image` instead of `this`)
image.wrap("<a href =tel:"+cellnumber+"/>");
image.onclick=function()
{
var cellnumber=$(this).attr("name");
}
Related
Hi I work on js practise about dom, and I found discripancy in code.
var numberOfDrumButtons = document.querySelectorAll(".drum").length;
for(var i = 0; i<numberOfDrumButtons; i++){
document.querySelectorAll(".drum")[i].addEventListener("click", function(){
alert("I got clicked.");
});
}`
The code above works properly, but the following two snippets of code won't work...
First one is that function is nested inside for loop.
var numberOfDrumButtons = document.querySelectorAll(".drum").length;
for(var i = 0; i<numberOfDrumButtons; i++){
document.querySelectorAll(".drum")[i].addEventListener("click", handleClicked)
function handleClicked(){
alert("I got clicked.");
}
Second is that I define function first, which means outside for loop.
var numberOfDrumButtons = document.querySelectorAll(".drum").length;
function handleClicked(){
alert("I got clicked.");
}
for(var i = 0; i<numberOfDrumButtons; i++){
document.querySelectorAll(".drum")[i].addEventListener("click", handleClicked)
}
I would like to ask why this happens.
I created a button where when clicked on creates another button but Iam not sure how to make an onclick event for that button
function boyFunction(){
var btn1 = document.createElement("BUTTON");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
I want to be able to click the basketball button and have that button show an image
Three things had to be done.
First your new element will need an id
btn1.setAttribute("id", "myButton");
click event handler will need to be created for your new element
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
and then you will define your click handler in a new function
function myButtonClickHandler {
// my code
}
Your code after doing the above change will look like below:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.setAttribute("id", "myButton");
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
document.getElementById("myButton").addEventListener("click", myButtonClickHandler);
}
function myButtonClickHandler {
// my code
}
You can add an Click Handler like this:
document.getElementById('button').onclick = function() {
alert("button was clicked");
};
of course you need to give your new button the id 'button' or any other id you choose
You can simply do this
function boyFunction(){
var btn1 = document.createElement("BUTTON");
btn1.addEventListener('click',()=>console.log('clicked'));
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
Can work like this:
function boyFunction(){
var btn1 = document.createElement("BUTTON");
// your "onclick function" goes here
btn1.onclick = function () { };
var x = document.createTextNode("basketball");
btn1.appendChild(x);
document.body.appendChild(btn1);
btn1.classList.add('btn1');
}
I have a document where I need to find a text or word, each time i run a function the selection has to go to next if a word or text is found. If it is at the end it should take me to top in a circular way just like find option in notepad.
Is there a way to do it?
I know about findText(searchPattern, from) but I do not understand how to use it.
There are several wrappers and classes in the DocumentApp. They help to work with the contents of the file.
Class Range
Class RangeElement
Class RangeBuilder
It is necessary to understand carefully what they are responsible. In your case the code below should be work fine:
function myFunctionDoc() {
// sets the search pattern
var searchPattern = '29';
// works with current document
var document = DocumentApp.getActiveDocument();
// detects selection
var selection = document.getSelection();
if (!selection) {
if (!document.getCursor()) return;
selection = document.setSelection(document.newRange().addElement(document.getCursor().getElement()).build()).getSelection();
}
selection = selection.getRangeElements()[0];
// searches
var currentDocument = findNext(document, searchPattern, selection, function(rangeElement) {
// This is the callback body
var doc = this;
var rangeBuilder = doc.newRange();
if (rangeElement) {
rangeBuilder.addElement(rangeElement.getElement());
} else {
rangeBuilder.addElement(doc.getBody().asText(), 0, 0);
}
return doc.setSelection(rangeBuilder.build());
}.bind(document));
}
// the search engine is implemented on body.findText
function findNext(document, searchPattern, from, callback) {
var body = document.getBody();
var rangeElement = body.findText(searchPattern, from);
return callback(rangeElement);
}
It looks for the pattern. If body.findText returns undefined then it sets on top of the document.
I have a gist about the subject https://gist.github.com/oshliaer/d468759b3587cfb424348fa722765187
I have just start learning Metaio. I am working on a simple development test project.
I have so far made the tracking sheet, put image and two arrows (buttons) which means next image and previous image.
For testing I made one of the buttons to display the image and the other for hiding the image. All this works fine so far.
My question is when I added extra images how can I shift the images dynamically back and forward using my next and previous buttons?
My testing code:
button2.onTouchStarted = function () {
image1.hide();
};
button1.onTouchStarted = function () {
image1.display();
};
It can be done different ways, I suggest you to use arel.Scene.getObject and put your image names inside array and each time you click next or previous you count the array key up or down.
I assume you are using Metaio Creator editor.
You have to added codes 3 different places:
Previous (left arrow button)
button1.onTouchStarted = function () {
if (currentImageIndex == firstImageIndex) {
return;
}
arel.Scene.getObject(imageArray[currentImageIndex]).hide();
currentImageIndex--;
arel.Scene.getObject(imageArray[currentImageIndex]).display();
globalsVar['currentImageIndex'] = currentImageIndex;
};
Next (right arrow button)
button2.onTouchStarted = function () {
if (currentImageIndex == lastImageIndex) {
return;
}
arel.Scene.getObject(imageArray[currentImageIndex]).hide();
currentImageIndex++;
arel.Scene.getObject(imageArray[currentImageIndex]).display();
globalsVar['currentImageIndex'] = currentImageIndex;
};
On your Global Script
var imageArray = ["image1", "image2"]; // and so on extra image names
var firstImageIndex = 0;
var lastImageIndex = imageArray.length - 1;
var currentImageIndex = firstImageIndex;
globalsVar = {};
arel.Scene.getObject(imageArray[currentImageIndex]).display();
All,
I am trying to implement a StackPanel containing multiple sub-panels to collect user data. Each subpanel (I have named them SwapRecordPanels) represents a line in a Google spreadsheet containing the data for two people who want to swap which days they will work. The SwapRecordPanels contain a delete button. On clicking the delete button, I would like the SwapRecordPanel to remove itself from the StackPanel.
However, I have found that when I attempt to remove an element from a StackPanel, the change does not register in the GUI. As an attempt at the proof of the concept that I could delete elements in a StackPanel, I added an extra button titled "Click Me". As you can see in the code below, its handler attempts to remove an element from the StackPanel "LeftPanel." However, when I click the button, the "LeftPanel" remains unchanged. I'm wondering if there's some sort of refresh/repaint method to be called to update the GUI. If not, could anyone offer any advice? Any help would be greatly appreciated.
function myViewer() {
var myapp = doGet();
SpreadsheetApp.getActive().show(myapp)
}
function doGet() {
var myapp = UiApp.createApplication();
var LeftPanel = myapp.createStackPanel().setId("LeftPanel");
var LeftScrollPanel = myapp.createScrollPanel(LeftPanel).setPixelSize(410,200)
myapp.add(LeftScrollPanel)
var SwapPane1 = SwapRecordPanel(LeftPanel);
var SwapPane2 = SwapRecordPanel(LeftPanel);
LeftPanel.add(SwapPane1,"Test 1 Header");
LeftPanel.add(SwapPane2, "Test 2 Header");
var myButton = myapp.createButton("Click Me").addClickHandler(myapp.createServerHandler("ButtonClicker"));
myapp.add(myButton);
return myapp;
}
function ButtonClicker()
{
Logger.log("I was clicked")
var myapp = UiApp.getActiveApplication();
var LeftPanel = myapp.getElementById("LeftPanel");
LeftPanel.remove(myapp.getElementById("panel1"));
}
You have to "return" the changes to the app from the handler function for the UI to update.
Simply add return myapp; at the end of the ButtonClicker() function.