It's my first app, I have been in tutorial hell for one year and decided to start my own little app.
So in this part Im using an addEventListener(),which appends and create text. The text is a variable created by the sum of the results of other functions (I don't know if this is relevant), but the thing is once I submit a button and creates the HTML element, if I keep submitting the elements will pile up. So I tried removeChild() but it didn't work because the variable was already created with its value, or...brought an error that can't removedChild() of undefined (since I tried to clear the values before appending), also tried to reseting the variable by adding a .innerHTML=""; but I don't know where to locate it. I also checked the replaceChild() but it didn't make sense, since everytime you click should be a new first event created. I tried the empty().append() but seems it's for jquery.
Seems that I need to learn a lot about scopes.
let frase;
function armarPersonaje() {
if(!reversarNombre() || !descMes || !descDia){
return false
} else {
frase = nombreReves + descMes + descDia;
return true
}
}
let div;
let h3Element;
function mostrarPersonaje(){
let div = document.getElementById('container')
let h3Element = document.createElement("h3")
h3Element.className = "addedH3"
if(frase.length > 0){
h3Element.appendChild(document.createTextNode(frase));
div.appendChild(h3Element)
}
}
enter image description here
Here's the complete code
https://jsfiddle.net/santiso/mzv3ct5e/
The problem here that in your last function mostrarPersonaje() you are always creating the element h3Element before the if , and even if you empty the parent node which is the div it will create a new element whit class addedH3 the very next click !
How to fix it ? first do not create until you enter the condition , then delete it when ever you click again even before the condition
here is the fiddle
and this is what i added
let oldH3Element = document.querySelector('h3.addedH3')
if(oldH3Element) oldH3Element.parentNode.removeChild(oldH3Element)
Related
I've been programming in javascript (with a support from jquery) and I've run into some weird variable behaviour, which in I think is truly unexpected (or maybe I don't know something).
Basically, what I wanna do is to have one variable (zodziai) (array) be "stuffed" with arrays in one part of code and later on have those arrays removed by a click of buttons (one by one).
Also I still want to have those arrays saved in the end of the game even if the first variable is empty because of the button clicks.Easy, I thought to myself, so I've created another array variable (zodziai2) and equated those both in the beginning of the game (when the first one is full of arrays, ready to have them removed one by one.
Everything seems to fine until I check the value of zodziai2, second variable, in the end of the game. Even if it hasn't been touched throughout the process of removing elements from zodziai (first variable), somehow it turns out to be empty too in the end of the game.
Code: I declared both variable inside document.ready as = [];
$("#begin").click(function() {
//#begin is a button which starts the game
$("#enterwords").html("It's showtime!");
zodziai2 = zodziai; //zodziai is full of stuff, making zodziai2 the same
alert(window.zodziai2); //checking, zodziai2 seems to be equal to zodziai
taskai = 0;
maxtaskai = zodziai.length;
...
if (zodziai.length > 0) {
... stuff, just DOM.
...
}
});
And there goes the next button, which is responsible for removing one item from zodziai array. Somehow it gets removed from zodziai2 too.
$("#next").click(function() {
enword = $("#angliskas_zodis").val();
ltword = $("#lietuviskas_zodis").val();
//enword = enword.split("");
//atitinkamas = atitinkamas.split("");
if (enword == atitinkamas) {
...
zodziai.remove(random_skaicius); // removing one item from zodziai (no worries, it's a self written function, working as a bee
...
...
});
Later on, I define the third button, restart, in which zodziai2 is now empty as is zodziai. How can zodziai2 be empty if the code is only "playing" with zodziai? What am I missing??
$("#restart").click(function() {
zodziai = zodziai2; //should be full of stuff, but is certainly not :(
random_skaicius = 0;
ilgis = 0;
zodis = "";
atitinkamas = "";
tempzodislt = "";
taskai = 0;
maxtaskai = 0;
klaidingi = [];
$("#angliskas_zodis").val("");
$("#lietuviskas_zodis").val("");
surasymas(window.zodziai2);
alertify.alert("Drop us a line if you think this function would be useful :)");
});
Just a pointer. I see you write a statement zodziai2 = zodziai. What it means that both variables point to the same memory location of the array. If you remove an element from zodziai, it'll be removed from zodziai2 too. Does this helps?
im using this code to return the attrb name of the class tooltip (have more than one class in all the page)
CODE:
var hrefs = document.getElementsByClassName('tooltip_sticky');
for (var i = 0; i < hrefs.length; ++i) {
var item = hrefs[i].innerHTML;
}
alert(item);
HTML:
(http://i.stack.imgur.com/klS0N.png)
but it only return the <span.... of the last tooltip_sticky class, but i dont want this, i want to get the hrefs that have MISSION=1, i know its a matter of filter, but i cant first get the list of hrefs(i used another code that was getting the href outside the name="..", but the href inside, no...
im planning to get automatically all the hrefs that have mission=1 in the page, and open each one in another window automatically, its for a chrome extension!!
if someone can help me please, while this i will read about innerHTML getattribute
You are doing an alert() outside the loop so of course you only get the last one. In a statically scoped programming language, something like this wouldn't even compile because item is introduced inside the loop and used outside it.
I've found some code on a site and been tinkering with it a little. It involves some functions to add and delete students (the add code is below) from an array - into a value field. I can't figure out why in tarnations we need this extra piece of code, however.
Here is the js code:
var students = ['Paulie', 'Nicole', 'Kevin', 'Mare'];
function addClick(){
var addRemove = document.getElementById('addRemoveStudent');
var studentsBox = document.getElementById('studentsBox')
students.push(addRemove.value);
addRemove.value = '';
studentsBox.value = students.join(', ');
}
My question is: Why do we need the addRemove.value = ''; line? I've tested it without that code and it still works fine. Is there a reason we need that?
I can send more code including the HTML but didn't what to overwhelm anyone with the volume.
Thanks so much in advance!
-Anthony
It's not necessary. I guess semantically it means to clear the addRemove box first before replacing the value.
It's optional, but it's simply to clear the text box so the user can enter a brand new value if they want to run the function again.
To clear the value of the addRemoveStudent ( I think it is a input type="text") Just for it, It is not needed in the array. Just to clear the value of that control.
Presumably addRemove is an input element. Setting the value property of an input element to an empty string '' means that the input is emptied: it will have no text in it.
My guess is that this function is run when a button is clicked, so it adds a new student to the array, updates the studentsBox field with the right data, and clears the input element so you can add more if the user wishes to do so.
I'm building a simple puzzle app for and iPad using a JavaScript library for dragging and dropping the pieces. I can't figure out how to check if all the pieces are in the right place however.
What I've got so far is
// create the draggable puzzle piece
var p1=document.getElementById('piece1');
new webkit_draggable(p1);
p1.className = 'ps1';
// create an array to count the pieces placed correctly
var countArray = new Array();
// create the dropspot, link it to the puzzle piece and add an element to the array to count. Finally kill the dropspot
var p1p1 = webkit_drop.add('droppiece1',{accept : ['ps1'], onDrop : function(){countArray.push("a");webkit_drop.remove('droppiece1')}});
// piece has been placed correctly.
if(countArray.length = 1){
alert('Piece placed correctly');
};
The problem I'm having is that the alert from the counting function fires immediately.
How can I fix this?
Change your last three lines to:
// piece has been placed correctly.
if(countArray.length == 1){
alert('Piece placed correctly');
};
You were trying to assign, instead of checking for equality.
Edit: So, it's still not working for you? It seems to me you are setting up a listener on onDrop but then directly after you have done that (presumably before the onDrop event ever gets triggered) you are checking if anything has been "dropped". See how that won't work?
If you just want to see that the event is actually getting triggered, and that the "a" is in fact pushed onto your array you could move the last three lines inside your callback. Like so:
// create the draggable puzzle piece
var p1 = document.getElementById('piece1');
new webkit_draggable(p1);
p1.className = 'ps1';
// create an array to count the pieces placed correctly
var countArray = new Array();
// create the dropspot, link it to the puzzle piece and add an element to the array to count. Finally kill the dropspot
var p1p1 = webkit_drop.add('droppiece1', {accept: ['ps1'], onDrop: function() {
countArray.push("a");
webkit_drop.remove('droppiece1');
// piece has been placed correctly.
if (countArray.length == 1) {
alert('Piece placed correctly');
}
}});
I haven't really tested that, but here is a version with all the webkit stuff taken out and the drop replaced with a simple click: http://jsfiddle.net/kajic/snJMr/1/
If you click the red box, is that what you expected to happen on your ipad app when you drop the piece?
You should change this
if(countArray.length = 1){
to
if(countArray.length == 1){
// ^^ use comparison, not assignment
The first line assigns 1 to countArray.length, which resolves to 1, which is truthy.
i am developing an autocomplete feature.but i am facing one problem there...
when i click on the suggestion box one of the results will not enter into the suggest html box...
function handleOnMouseOver(oTr)
{
deselectAll();
oTr.className ="highlightrow";
position = oTr.id.substring(2, oTr.id.length);
updateKeywordValue(position);
}
can you plz tell the solution
thanks
function updateKeywordValue(oTr)
{
var oKeyword = document.getElementById("keyword");
var strKeyword="";
var crtLink = document.getElementById("a" +oTr.id.substring(2,oTr.id.length)).toString();
crtLink = crtLink.replace("-", "_");
crtLink = crtLink.substring(0, crtLink.length);
oKeyword.value=unescape(crtLink.substring(googleurl.length, crtLink.length));
strKeyword=oKeyword.value.toString();
if (oTr.id.substring(2,oTr.id.length)==0)
{
oKeyword.value=strKeyword.substring(3,strKeyword.length);
}
selectedKeyword=oKeyword.value;
}
you should get rid of the second parameter in the substring() method. Since you just want the remainder of the string, I'm guessing, that is the default if you don't set a second value.
position = oTr.id.substring(2);
My guess is that you are getting the value of the keyword from the id, and pushing that into the input box, right? If that's the case, we'll need to see more of your code. Specifically, I'd like to see the updateKeywordValue function and I'd also like to know if the text that they are hovering over is the text you are trying to send the input box. If so, you could probably simplify the whole thing and go with something like:
function handleOnMouseOver(oTr)
{
deselectAll();
oTr.className ="highlightrow";
keywordbox.value = oTr.innerHTML;
}
But this is based on the assumption that the only data inside the hovered row is the text, and no other html. And I had to make up a name for your input box.
But if this way off, this is because we need more information to see the real problem.