Measure Clicks using Javascript? - javascript

Fairly new to using JS and I have created an image that brinks up a popup modal upon clicking it. I am following an example on w3schools.com, but I wish they would explain this one aspect of their code. So the popup modal contains an "x" that upon clicking, will close out of the modal as it should. However, when they create the variable in JS for the cancel button, they have it followed by a 0 in brackets:
var closeButton = document.getElementsByClassName("close")[0];
^
^
My first question is, what do you refer to this part that contains a numeric value? Is this an array? And is this used to measure how many clicks are being recorded (i.e. upon clicking, this value will change to [1]?).
Furthermore, Is it possible for me to append another variable in place of that value? In other words if it possible for me to do the following?
var clicks = [0];
var closeButton = document.getElementsByClassName("close").clicks;
I would like to know this because I want to see that if the button is clicked, I would to use the same cancel button on other modals in the same website. By this, I mean that I would like change the click value back to [0], so it would work the same for other modals (as of now, the cancel button only works on the first modal, and it does not close out the other ones. I believe it is because I am not going back to [0]).
Apologies on not using the correct terminology; That is one of the main reasons why I am asking this. What is that value in brackets [0] referred to? Is it measuring clicks? And how can I keep changing its value so that it is back to [0] when I want to perform the same action on other modals? Any and all help would be much appreciated as I am quite new to this.

var closeButton = document.getElementsByClassName("close")[0];
"getElemetsByClassName" will return an Array. By using "[0]" at the end, it's just saying that I want to store on closeButton the first position of this array.
If there's only one ".close" on the page, the return will be ->> [element].
If there's more than one ->> [element, element...]

The function getElementsByClassName[name] returns an array of all elements having [name] as class name. Because there is only one element with this specific class name in this example (or they know they only need the first element of the array) the index [0] is appended, returning the first element of this array. Therefore it makes no sense to change the index except you create more elements using the class "close". Also, the index has nothing to do with the count of clicks or your user interaction anyways.
Hope this answers your Question ^^

The value in brackets is indicating the index of an array.
This statement:
document.getElementsByClassName("close")
returns an array of elements in your document with the class name "close". If there are multiple close buttons it would return an array of all of those elements.
Adding [0] to the end of that statement means you are selecting the element at the starting index of the array (the first element in the array).
You could change that to [1] and it would select the second element within that array, but this doesn't help you in this situation.
If you want to close multiple modals with the same close button and there is only one close button with the class name 'close' than you can always select that button with:
document.getElementsByClassName("close")[0]

Related

JS - dynamic inserting items into array on button click

So while creating a project I've encounter a problem. I have a container, let's call it container with assigned index, so it looks like container0 etc. Inside that container I have buttons to copy ( and delete ) this particular segment with all it's data. I also have index array to make sure all id's are unique. I have a working project, but I want to solve this particular situation, when I have multiple containers, and in page source containers have indexes like [0,1,5,8,6,7,9,12,10,11]. What I am doing right now is whenever somebody clicks button inside let's say container[7] and user wants to copy that container 3 times I will have [0,1,5,8,6,7,13,14,15,9,12,10,11], and the way I've solved this problem is inside button handler I get id of container like const index = parseInt(e.target.id.match(/\d+/)[0]); and then using querySelector I select which container I want to get data from. What I would like for you to help me figure out, how may I get container Id inside which button was clicked in different, easier way instead of matching id from button ( copy and delete button also have id, which is equal to container id). Also one more thing, I use eventDelegetion to add eventListeners for newly created segments.

Retaining Memory of Initial Properties for Dynamic Buttons

I want to make a very simple mix and match system, where the user chooses items from a select drop down menu which triggers things. I have buttons that are appended to the document in a rather off the cuff manner, that is to say, whenever the user chooses something from the select some text will appear as well as a button to remove that text (and corresponding button). I'm using D3 to manipulate selections, add classes and append things. I use classes to tell the button which text to remove. All that being said, I believe this still could simply be a native javascript problem I'm running into. The problem is as follows:
After you choose some things from the select drop down menu, and then proceed to click the x buttons in the order bottom to top, the behavior is as desired. However, if you click a button at the top or in the middle, the button will not remove the right text. I believe that is because the button is simply removing whatever the latest string value of the dynamic class I'm using. That makes me doubt that the button actually retains the initial properties of its .on('click', function() {}) (hence the post title).
If that's the case, I'm not really sure how to circumvent such an issue, as the buttons are dynamic in nature.
Very short and simple example here.
No need to retain memory kind of thing just make sure your element is accessible one such scenario would be to save the id reference of element as class of another element like this
d3.select('body').append('button')
.text('X')
.attr('id','b'+(intCount+1))
.attr('class',choice+'1') //class is the id of the text element
.on('click', function(d,i) {
var t = d3.select(this).attr('id')
var c = d3.select(this).attr('class')
var thisChoice = choice;
d3.selectAll('.' + t).remove(); //remove this element
d3.selectAll('.'+ c).remove(); //remove text element
intCount -= 1;
count -= .7;
});
working FIDDLE

How we can pop element from one table and push the same element in other table when i click the submit button in Javascript?

I am new in javascript. So, I need to help.
Blockquote
var fruits = ["mango","apple","orange","kiwi"]
Blockquote
This is my array. I have two box in HTML. In One box there are one array which holds 4 Element and In Second box there is also An Empty Array.
Now when , I can perform onclick function on that time One element Pop from one box and push the same Element in other box at same time.
And Also i want to move all elements one by one. not all elements move in single click.
I want to move all elements in other box in 4 click, because of there are 4 Elements in array. So Every time i want to pop one element and Push 1 element in other.
So, Now How can i Perform this Push-pop operation in JavaScript. I really have no idea about this. Please help. Thanks in Advance..!!!
Try this, pop removes the last one from an array and returns it. Push adds to the end of an array. Put together you can remove an item from ine array and add to a different one in one statement.
var fruits = ["mango","apple","orange","kiwi"];
var emptyArray = [];
emptyArray.push(fruits.pop());

Javascript not retaining div id on reload with localStorage?

I am trying to have three links, which will show a div when you click on them. If you click on these links again, another type of that link will be shown. For example, if I have the link one, clicking on it will produce div one. Clicking on it again will produce div one1. This way, each element has a unique id, and can have custom styles applied to individual divs at a later time.
When the user clicks one of the a links, it creates a localStorage key for how many times that type of div was clicked. For example, if I click div one's line 5 times, the localStorage key would be 5. Then when the page is reloaded, my script duplicates the div onto the page 5 times, and sets the counter for part 1 to 5. This way, when you start clicking on the a links again, they don't start from 1, but from 5, so that they're aren't any conflicting ID's.
The problem I am running into is the delete function. Say the user duplicated 5 of div one. That means that one1, one2, one3, one4, one5 are all present on the screen. If the user reloads the page, they're all still there. Let's say the user deletes div1 from the page though. It removes div1 and all styling associated with it, and leaves the other divs in tact...
BUT, if you reload the page, the script duplicates the div's starting from 1-4 (as they're were only 4 divs saved to the localStorage key), instead of duplicating from 2-5, as #1, or div1, was deleted.
I realize that's a lot to read, and might be tough to understand, so I made a fiddle with the code in it.
http://jsfiddle.net/charlescarver/bMzME/2/
To test what I'm saying, you have to show a number of div's, say 5 of "one". You'll notice that #one1, #two1, and #three1 all have a border to them, to show what happens when you delete them. As you duplicate the divs, div1 will have the border. If you delete that div, the other div's on the page won't be affected until you reload the page. Once you reload, you'll notice that the former div2 has had it's id changed to div1, instead of keeping it at div2.
Is there anyway to fix this without having to rewrite the entire script? I feel like there might be a quicker way to fix it, and I just can't picture it.
PS, if you read all of that above, I am honestly thankful
I just couldn't get your code to work, sorry.
I did however manage to achieve roughly what you describe: http://jsfiddle.net/bMzME/11/
I believe one of the issues is that you are just keeping count of the #one, #two, #three and using that to create the div IDs dynamically.
What you need is a data structure that holds all i such that div{i} is present. Probably create a list and map it to your key which is #one, #two, #three. Then you get the list and iterate over the elements in $(".base") for-loop.
Now if you had 5 div ones and you deleted the 5th one, you will have one1, one2, one3, one4. If now I insert another div one do you want that at 5 or 6? If you want at "5" simply take the max() from your list else use a separate counter as shown below - see var: idx. Then add idx to your list - I haven't coded the list. I will try my solution but will take some time - not all to familiar with JS. But the idea should work I believe.
$(".a").click(function() {
var target = $(this).attr("href");
var id = $(target).attr("id");
var x = $("." + id).size();
var click = $(target).data("clicked") || x;
var idx = localStorage.getItem(target+"i");
$(target).data("clicked", ++click);
if (idx == null) {idx = 1;}
var name = id + idx;
alert(name);
$(target).clone().attr("id", name).attr("class", "drag " + id).appendTo("body");
localStorage.setItem(target, click);
localStorage.setItem(target+"i", ++idx);
});

Show a button next to an element inside TinyMCE

I want to show a button (for example, span.mybutton) next to every instance of a specified element (for example, a table) in TinyMCE—and then, when that button is clicked, grab that specific element's html, process it, and update it in the editor.
I can handle the processing, but I can't figure out how to display the button and pass in grab the specific element's html. If I do this, for example, it adds the html of span.mybutton to TinyMCE as if it were regular content, which I don't want:
jQuery('iframe#content').contents().find('table').append('<span class="mybutton">My button</span>');
Here's what I'm trying to do:
function processElement( element, values ) {
// do stuff to the table html (I don't need help with this part)
return element;
}
function appendButtonToTinyMCEElement ( button, element ) {
// put button next to all instances of the specified element in TinyMCE
// (in this case, put span.mybutton at the corner of all tables)
}
$('.myhelperbutton').click(function(){
var element = ??? // get content of the element whose button was clicked
var element = processElement( element );
// send element back to TinyMCE (not sure how)
});
So, my two questions are:
How can I display the button in the right place without affecting the html that gets saved in TinyMCE? And, when the button is clicked, how do I get/set just that element from TinyMCE?
If I understand correctly you wish to grab all table DOM elements, and place a button next to it which does some stuff.
Below is my first thought. I am going to make convenient assumptions to make it easier, but let me know if I made some wrong assumptions somewhere. I also don't know how much javascript/jquery you already know, so let me know if I didn't explain something clearly.
jQuery('iframe#content').contents().find('table').each(function(index, element) {
// create a new button.
var $btn = $('<input type="button" class="mybutton"></input>');
function action() {
// This is using the `processElement` function you defined in your question,
// I am applying it to the specific table just grabbed.
processElement(element);
}
$btn.click(action);
// This should append the button. See http://api.jquery.com/after/
$(element).after($btn[0]);
});
Let me know if this works for you or not.

Categories

Resources