I have a label that holds a value and a text box into which I will enter a number. I have another label, which should dynamically give the difference between the two as I type the number in the text box. How do I do this using Javascript? I tried:
<script type="text/javascript">
function compute_diff(){
var lbl1 = document.getElementById("<%=label1.ClientID%>").value;
var txtbox = document.getElementById("<%=textbox1.ClientID%>").value;
var lbl2value = lbl1 - txtbox
document.getElementById("<%=label2.ClientID%>").innerText = lbl2value;
return true;
}
</script>
I am calling this function on the OnKeyUp event, but it is not firing it. What is the correct way of going about this? I am developing the site using ASP.Net.
The line
var lbl2value = lbl1 - txtbox
will not work. You will need to use a string diff algorithm such as the one at
http://ejohn.org/projects/javascript-diff-algorithm/
In addition, consider using jQuery to ensure that this works cross browser as the implementation of innerText can differ from browser to browser.
Related
I want the label with id="risultato" display the area of triangle,I tried to make this,but when I pressed button "risultato:" the risult is NaN,why?
Thanks lots
code: http://i.stack.imgur.com/52Pbd.png
You are getting NaN because of this:
var altezza = document.getElementById('altezza');
var base = document.getElementById('base');
(base*altezza/2)
getElementById() does exactly that - gets the element. You just need to get the value from the element e.g. var altezza = document.getElementById('altezza').value;
I want to be able to click on a specific element, and have it send a value to a textarea. However, I want it to append to a specific row/line of the textarea.
What I am trying to build is very similar to what happens when you click the notes of the fret board on this site: http://www.guitartabcreator.com/version2/ In fact, i want it almost exactly the same as this.
But right now I am really just trying to see how I can target the specific row, as it seems doable based on this website.
Currently I am using javascript to send a value based on clicking a specific element.
Here is the js:
<script type="text/javascript">
function addNote0(text,element_id) {
document.getElementById(element_id).value += text;
}
</script>
This is the HTML that represents the clickable element:
<td> x </td>
This is the textarea:
<textarea rows="6" cols="24" id="tabText" name="text">-
-
-
-
-
-</textarea>
This works fine for sending the value. But it obviously just goes to the next available space. I am a total newb when it comes to javascript, so I am just not sure where to begin with trying to target a specific line.
What I have currently can be viewed here: http://aldentec.com/tab/
Working code:
After some help, here is the final code that made this work:
<script>
function addNote0(text,element_id) {
document.getElementById(element_id).value += text;
var tabTextRows = ['','','','','',''];
$('td').click(function(){
var fret = $(this).index() - 1;
var line = $(this).parent().index() -1;
updateNote(fret, line);
});
function updateNote(fret, line){
var i;
for(i=0;i<tabTextRows.length;i++){
if(i == line) tabTextRows[i]+='-'+fret+'-';
else tabTextRows[i]+='---';
$('#tabText').val(tabTextRows.join('\n'));
}
}}
window.onload = function() {
addNote0('', 'tabText');
};
</script>
Tried to solve this only in JS.
What I did here is use an array to model each row of the textfield (note the array length is 6).
Then I used a jQuery selector to trigger any time a <td> element is clicked which calculates the fret and string that was clicked relative to the HTML tree then calls the updateNote function. (If you change the table, the solution will probably break).
In the update note function, I iterate through the tabTextRows array, adding the appropriate note. Finally, I set the value of the <textarea> to the array joined by '\n' (newline char).
Works for me on the site you linked.
This solution is dependant on jQuery however, so make sure that's included.
Also you should consider using a monospaced font so the spacing doesn't get messed up.
var tabTextRows = ['','','','','',''];
$('td').click(function(){
var fret = $(this).index() - 1;
var line = $(this).parent().index() -1;
updateNote(fret, line);
});
function updateNote(fret, line){
var i;
for(i=0;i<tabTextRows.length;i++){
if(i == line) tabTextRows[i]+='-'+fret+'-';
else tabTextRows[i]+='---';
$('#tabText').val(tabTextRows.join('\n'));
}
}
I wrote the guitartabcreator website. Jacob Mattison is correct - I am using the text area for display purposes. Managing the data occurs in the backend. After seeing your site, it looks like you've got the basics of my idea down.
I am trying to use jQuery / javascript to remove a class from a named input element if a checkbox is ticked.
I have several checkboxes, each with a accompanying hidden (on page load) text input field.
The checkbox and text input field are named "question_X" and "question_X_description" respectively. (where X is a number 0 to 100, say)
As such I'm trying to define a variable in my code that is defined as "this element's name"+"_description", and then use that to define the suitable element to remove the class from.
Here is what I've tried:
$('input:checkbox').change(function(){
var x = $(this).attr('name').'_description';
if($(this).is(":checked")) {
$('input[name="x"]').removeClass("hidden");
} else {
$('input[name="x"]').addClass("hidden");
}
});
However, nothing happens when the any checkbox is checked. Am I referencing my variable correctly?
Use your console, It will have error messages.
First issue
var x = $(this).attr('name').'_description';
^^^
That is not how you build a string in JavaScript. JavaScript does not use . to join strings. It uses +
var x = $(this).attr('name') + '_description';
Second issue
$('input[name="x"]').
You are not looking for the string you built, you are looking for an element with the name x
Needs to be
$('input[name="' + x + '"]').
$('input[name="x"]').removeClass("hidden");
Will be looking for:
<input name="x" />
Try
$(name="'+x+'").removeClass("hidden");
Use document.getElementById('element_name')
Example of HTML element:
<input type="text" id="element_name">
I am looking for a way to clear the old values from textbox when I refresh the page using javascript.
I tried this code but it didn't work.
<script>
document.getElementById("FIRST").value = "";
document.getElementById("END").value = "";
</script>
consider executing your javascript inside the $(document).ready function
HTML code--
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.field.selection.js"></script>
<div id="copy">Copy</div>
<textarea....id="t">
jquery---
$(docu.....
$('#copy').click(function(){
var range = $('#TextArea').getSelection();
alert(range.text);
});
});
When the #copy button is pressed the alert does not show the selected text in #t. It comes in blank.
I need the selected text from the textarea
Your code is not running because, this statement fails
var range = $('#TextArea').getSelection();
There is nothing as TextArea as ID in the markup you provided, so the script encounters an error and does not continue beyond it.
If you place the alert at the top part, I am sure the alert box will pop up.
i.e
$('#copy').click(function(){
alert(''); //this will work
var range = $('#TextArea').getSelection();
alert(range.text);
});
getSelection is a method of the document, so you should do:
var range = document.getSelection();
also note that you'll have to use document.selection.createRange() in IE so everything gets a bit complicated.
take a look at this example for more information. you'll end up needing a function like this:
function getSelectedText(){
if(document.all){
var selection = document.selection;
var newRng = selection.createRange();
newRng.select();
return newRng.htmlText;
}else{
return document.getSelection();
}
}
wich should return the selected text and work in all major browsers.
EDIT:
just saw you're using some kind of jquery-plugin that (maybe) should make your code work. the problem is:
in your html, the id of the textarea is "t":
<textarea....id="t">
but in your javascript, you're trying to get the selection of id "TextArea":
$('#TextArea').getSelection();
please change the id of your textarea to "TextArea" (or the other way around) and see what happens.
I'm not sure about the question, but if you need to get the textarea value, just use the val jQuery method:
http://api.jquery.com/val/
$('#copy').click(function(){
var range = $('#t').val();
alert(range);
});
Either you change your id="t" or you change #TextArea to #t to get the textarea you have in your html markup.
But I have no idea what plugin that you are using or what it want.