Hello I am working on two functions swapFE() and swapEF(). The purpose of these two functions is to exchange the French phrases with the English phrases which I've already done.
When I press the mouse button down on each phrase the English translation appears which is what i want it to do.
The problem is when I release the mouse button the French phrase should reappear and it doesn't happen. I don't know what I'm doing wrong.
I would appreciate it if someone can help me. Thanks for your time and for your help.
function swapFE(e){
var phrase = e.srcElement;
var parent = phrase.parentNode;
var idnum = parent.childNodes[0];
var phrasenum = parseInt(idnum.innerHTML)-1;
phrase.innerText = english[phrasenum];
phrase.className ='english';
}
function swapEF(e){
var phrase = e.srcElement;
var parent = phrase.parentNode;
var idnum = parent.childNodes[0];
var phrasenum = parseInt(idnum.innerHTML)-1;
phrase.innerText = french[phrasenum];
phrase.className ='french';
}
Without seeing your html it's difficult to determine if your issue is (1) your javascript method (I'm assuming swapEF) isn't working correctly or (2) the assignment of your event handler is not working or both. Make sure you are using the correct event functions ( "mousedown" and "mouseup") and try to test your functions manually in a javascript debugger like firebug or the Chrome javascript console. That will help you pinpoint the issue and fix your problem, but without the html and the assignment of your event handler it is difficult to post a solution.
Related
How do you make a button do a certain task instead of just a click? I am trying to put a highlight on text and scroll on a button when you click on it. The for loop and if statement inside the function is correct? Also, I saw in a post to put extra parenthesis around beginning and end of the function. Is that correct? Please help fix this code. Thank you!
var press = document.createElement('press');
press.onclick = (function () {
for (var q = 0; q < i; q++) {
if ( x == y ) {
document.getElementById(x).scrollIntoView(true);
$('body').text().highlight(x);
}
}
})();
I have difficulty understanding your question but I will attempt answering it based on your code.
'How do you make a button do a certain task instead of just a click?'
You add an event listener to the button, disable the default behavior and write the task in the listeners callback.
btnElement.addEventListener('click', (e)=>{
e.preventDefault();
//Code for your task
});
The for loop and if statement inside the for loop is correct?
I am not sure if its a question or statement. Syntactically it looks correct, but I cannot say more without proper context. What is x? Please provide a working sample or more code.
Also, I saw in a post to put extra parenthesis around beginning and end of the function. Is that correct?
You do that only when you want to have an IFFE (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression). Basically, you call the anonymous function right after defining it.
Please help fix this code. Thank you!
Please go over the points mentioned above and make changes to your code. In order to help you fix the code I need more information about what you are trying to do. The best I can do is add indentation.
var press = document.createElement('button'); //Create a button element.
press.onclick = (function () {
for ( var q = 0; q < x.length; q++) {
if ( x == y ) {
document.getElementById(x).scrollIntoView(true);
$('body').text().highlight(x);
}
}
})();
This question already has answers here:
How to change the Content of a <textarea> with JavaScript
(6 answers)
Closed 7 years ago.
Today i made a question and i tried to make some advices of experts on javascript, however my code it is still failing. Im going to try to give more information with the purpose to solve my problem. Im new on javascript and im completely sure that this will piece of cake for some people. This is my problem with my code. Im going to try to give all info as soon as possible.
I have this jsp with this textarea:
<form:textarea id="textEnv" path="buscadorReferenciaE" onkeyup="comprobarTexto();"
cssStyle="vertical-align: middle; margin-left:1px; width: 263px; height: 220px;" />
In this code as you can see a user enter string, and is involved in the onkeyup:
And this is my function on javascript:
function comprobarTexto(){
var texto = document.getElementById('textEnv').value;
if (texto.length > 14) {
texto= "";
}
}
The purpose of this function is that when the user reaches 14 characters the text on the texfield must be REMOVED COMPLETELY, however despite advices of experts my code still failing and the function doesnt work. Its very probably that is my fault, but im still not seeing how to resolve this. I give more information on the last question that i made:
Removing content of a var
It must be the function in javascript, that is not working, no more code of my jsp is involved. When the characthers reaches to 14 the function warn me with an alert(now is removed but it works) I will try tomorrow to solve this, with your help. Thanks for your help as always.
You must write to the text field:
function comprobarTexto(){
var texto = document.getElementById('textEnv').value;
if (texto.length > 14) {
texto= "";
document.getElementById('textEnv').value = "";
}
}
You copy the content of the textarea to a variable and clear the variable, but this leaves the textarea unchanged. So, clear the textarea too.
Check you rendered code in your browser:
var texto = document.getElementById('textEnv').value;
This may be correct when you are in the editor. But that ID changes once it renders. Set the ID to match what the rendered version shows.
The problem is that you are merely saving the reference to the value at that current time. Instead, I'd suggest something like this:
function comprobarTexto(){
var texto = document.getElementById('textEnv');
var current = texto.value;
if (current.length > 14) {
texto.value = "";
}
}
this way, you are defining it once and using it multiple times to do various things.
Hope this helps you understand!
I have the following problem - I'm catching a key event an I need to create a new altered key event(since it seems the keyCode property is read-only) and afterwards handle the newly created KeyEvent. I came across several old posts in StackOverflow where similar situations are handled, but:
I need this to be working under Webkit /there's a solution here in StackOverfow but it is working only in Gecko/
I need to create another KeyEvent, but not TextInputEvent, since the TextInputEvent will only let my specify a string to be inserted, whilst I cannot do that as I use a third party tool that needs to handle this event and I need a keycode.
I tried jQuery#trigger() but it won't work for me. My code is as follows
var event = jQuery.event('keydown');
event.which = 13; //I'm trying to simulate an enter
$('iframe').contents().find('document').find('body').trigger(event); //my content is inside an iframe
(function($){
$(window).load(function(){
var e = $.Event("keydown");
e.which = 13;
e.keyCode = 13;
$('iframe').contents().find('html, body').trigger(e);
});
})(jQuery);
i'm implementing a charcounter in the UI, so a user can see how many characters are left for input.
To count, i use this simple function:
function typerCount(source, layerID)
{
outPanel = GetElementByID(layerID);
outPanel.innerHTML = source.value.length.toString();
}
source contains the field which values we want to meassure
layerID contains the element ID of the object we want to put the result in (a span or div)
outPanel is just a temporary var
If i activate this function, while typing the machine really slows down and i can see that FF is using one core at 100%. you can't write fluently because it hangs after each block of few letters.
The problem, it seems, may be the value.length() function call in the second line?
Regards
I can't tell you why it's that slow, there's just not enough code in your example to determine that. If you want to count characters in a textarea and limit input to n characters, check this jsfiddle. It's fast enough to type without obstruction.
It could be having problems with outPanel. Every time you call that function, it will look up that DOM node. If you are targeting the same DOM node, that's very expensive for the browser if it's doing that every single time you type a character.
Also, this is too verbose:
source.value.length.toString();
This is sufficient:
source.value.length;
JavaScript is dynamic. It doesn't need the conversion to a string.
I doubt your problem is with the use of innerHTML or getElementById().
I would try to isolate the problem by removing parts of the function and seeing how the cpu is used. For instance, try it all these ways:
var len;
function typerCount(source, layerID)
{
len = source.value.length;
}
function typerCount(source, layerID)
{
len = source.value.length.toString();
}
function typerCount(source, layerID)
{
outPanel = GetElementByID(layerID);
outPanel.innerHTML = "test";
}
As artyom.stv mentioned in the comments, cache the result of your GetElementByID call. Also, as a side note, what is GetElementByID doing? Is it doing anything else other than calling document.getElementById?
How would you cache this you say?
var outPanelsById = {};
function getOutPanelById(id) {
var panel = outPanelsById[id];
if (!panel) {
panel = document.getElementById(id);
outPanelsById[id] = panel;
}
return panel;
};
function typerCount(source, layerId) {
var panel = getOutPanelById(layerId);
panel.innerHTML = source.value.length.toString();
};
I'm thinking there has to be something else going on though, as even getElementById calls are extremely fast in FF.
Also, what is "source"? Is it a DOMElement? Or is it something else?
A short while back I asked a question here about how I could calculate when a heading was longer than one line within a given container, and subsequently wrap each of these lines in a <span>:
Use Javascript/jQuery to determine where a heading breaks to the next line?
I chose an answer which worked great for me, at least until I checked in IE7 and IE6, in which all the headings handled by this script rendered as
"undefinedundefinedundefinedundefinedundefinedundefined[...]"
on the page. As I'm not really a JavaScript person (that's why I asked such a question in the first place), it's really tough for me to figure out where the problem is. I assumed an undefined variable or something, but I just can't seem to grasp it.
Can anyone help?
I'll repeat the code here, but please refer to the link above for context:
$(function(){
$h = $('.fixed').find('h3');
$h.each(function(i,e){
var txt = $(e).text();
$th = $('<h3 />').prependTo($(e).parent());
var lh = $(e).text('X').height();
$(e).text('');
while (txt.length > 0) {
$th.text($th.text() + txt[0]);
txt = txt.slice(1);
if (($th.height() > lh) || (txt.length <= 0)) {
var shc = $th.text().split(' ');
var ph = shc.slice(0,-1).join(' ')+' ';
if (txt.length <= 0) { ph += shc.pop(); }
$('<span />').text(ph).appendTo($(e));
$th.text(shc.pop());
}
}
$th.remove();
})
});
You need to change
$th.text($th.text() + txt[0]);
to be
$th.text($th.text() + txt.charAt(0));
IE<8 doesn't accept string positions through array indexes ;)
The styling doesn't work, but that'll be a CSS issue which I couldn't fix before leaving. But everything is wrapped in spans :)
Nothing jumps out at me. But, since you mentioned in your comment to your question that you see "undefined" in Firebug, I would start there. Even though those browsers are failing gracefully, the fact that you see undefined there is your first hint to finding the problem for the harder-to-diagnose IE6/7. I would use Firebug and either breakpoint in the function, or use some console.log() calls to document what the values that you are working with are each step of the way. Once you start seeing undefined... you have likely found your problem.