-
Mar 11th, 2014, 10:40 AM
#1
[RESOLVED] [JS]Get value of textbox
I feel like I have a good grasp of HTML and CSS so I want to learn JavaScript now. Basically I'm trying to create something that will check if a word is a palindrome or not and this is the script that I'm using:
javascript Code:
function isPalindrome(word) { var backwards = ""; var i = word.length; while(i--) { backwards += word.charAt(i) } if (word == backwards) { alert(word + " is a palindrome.") } else { alert(word + " is NOT a palindrome.") } }
It works ok, I haven't figured out how to ignore casing yet but non the less it works when the casing is the same. The issue I'm having is that I want it to work when a use inputs some text in a textbox and clicks on a button. Currently this is what I have:
Code:
<label>Check For Palindrome</label>
<input name='palindromText' type='text' />
<input type='button' onclick='isPalindrome(document.getElementsByName('palindromText').value' value='Submit' />
I'm thinking that my issue is with the onclick, but I'm not positive. Could somebody point out what I'm doing wrong?
Last edited by dday9; Mar 11th, 2014 at 10:49 AM.
Reason: Changed html tags to code tags. They look better.
-
Mar 11th, 2014, 11:06 AM
#2
Re: [JS]Get value of textbox
I was able to correct my problem. Turns out that getElementsByName returns an array of objects so I need to get the first object:
Code:
getElementsByName("palindromText")[0].value
I was also able to fix my casing issue like this:
javascript Code:
// Declare a new function with a string parameter function isPalindrome(word, ignoreCasing) { // Create a new instance of a blank string var backwards = ""; // Create a new instance of an integer and set it to our parameter's length var i = word.length; // Loop while i > 0 while(i--) { // Add the letter we are on in the iteration to the backwards word backwards += word.charAt(i) } // Check if we are ignoring the casing or not if (ignoreCasing) { // If the word is the same as the backwards word then it's a palindrome if (word.toUpperCase() == backwards.toUpperCase()) { alert(word + " is a palindrome.") // Otherwise it's not... } else { alert(word + " is NOT a palindrome.") } } else { // If the word is the same as the backwards word then it's a palindrome if (word == backwards) { alert(word + " is a palindrome.") // Otherwise it's not... } else { alert(word + " is NOT a palindrome.") } } }
-
Mar 11th, 2014, 11:06 AM
#3
Re: [JS]Get value of textbox
*edit* Appears I was sniped.
A couple of issues.
#1 If you want to learn JavaScript, I would recommend unobtrusive JavaScript, rather than how you're writing it. You can find some good tutorials on Google.
#2 Your onclick event is encased in single quotes, but you're using single quotes for your function, so it is escaping it.
#3 You don't have your close bracket for your isPalendrome function in your onclick.
The line should read:
Code:
<input type='button' onclick="isPalindrome(document.getElementsByName('palindromText').value)" value='Submit' />
Another issue is that you're using getElementsByName. Notice the plural. It returns an array. So you would need to reference the first index of the array (multiple elements can have the same name in HTML).
Code:
<input type='button' onclick="isPalindrome(document.getElementsByName('palindromText')[0].value)" value='Submit' />
However, most people simple use getElementById instead, since IDs need to be unique per field.
So if you added the ID to your textbox field like so:
Code:
<input name='palindromText' id='palindromeText' type='text' />
You could then reference it as such:
Code:
<input type='button' onclick="isPalindrome(document.getElementById('palindromeText').value)" value='Submit' />
And lastly, you can use .toLowerCase() to convert your text and compare.
-
Mar 11th, 2014, 11:18 AM
#4
Re: [RESOLVED] [JS]Get value of textbox
I did take your advice in changing the Name to ID and using getElementById, but I'm having some issues changing my code to be unconstructive. What I've read up on it, this is what I've tried:
html:
Code:
<label>Check For Palindrome</label>
<input id='palindromeText' type='text' />
<input id='palindromeBtn' type='button' value='Submit' />
javascript:
javascript Code:
window.onload = function() { document.GetElementById("palindromeBtn").onclick = isPalindrome(getElementById("palindromeText").value, false); }
But that isn't working for me. I do have that JS line at the top of my script too.
-
Mar 11th, 2014, 11:44 AM
#5
Re: [RESOLVED] [JS]Get value of textbox
Not sure if it was a typo, or a Fruedian slip, but it's unobtrusive, not unconstructive, haha.
One thing you'll find about unobtrusive javascript, is that it isn't as easy to pass data when binding the function.
Your code is close, but you would need to do something like this:
Code:
window.onload = function(){
document.getElementById("clickme").onclick = isPalindrome;
}
function isPalindrome()
{
var word = document.getElementById("palindromeText").value;
var backwards = "";
var i = word.length;
while(i--) {
backwards += word.charAt(i)
}
if (word == backwards) {
alert(word + " is a palindrome.")
} else {
alert(word + " is NOT a palindrome.")
}
}
Assuming that your button has an id of "clickme".
Note that I put the actual code to get the value from the textbox in the function itself.
To get around that, you could have a click function for the button that gets the value, and then passes it to the isPalindrome function.
Once you get a little better at JavaScript, I would also recommend getting into jQuery. JavaScript is really good to know, and jQuery is just a wrapper around it, but jQuery abstracts away a lot of the tougher stuff in JavaScript (like cross-browser compatibility).
An example of getting the selected value of a radio button in JavaScript vs jQuery:
JavaScript:
Code:
var radios = document.getElementsByName('fieldname');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert(radios[i].value);
}
}
jQuery:
Code:
$('input[name="fieldname"]:checked').val();
-
Mar 11th, 2014, 12:51 PM
#6
Re: [RESOLVED] [JS]Get value of textbox
Not sure if it was a typo, or a Fruedian slip, but it's unobtrusive, not unconstructive, haha.
Lol, yeah I mistyped it and when I right clicked I just chose the first suggested word.
Well I've tried taking your suggestion of creating a click event for my button and then calling the isPalindrome function with the appropriate parameters and it's still not working. By not working I mean nothing is happening whenever I click my button. Here is what I'm trying:
javascript Code:
// Setup handlers for the controls window.onload = function() { document.GetElementById("palindromeBtn").onclick = palindromeBtn_Click; } // Setup a click event for the palindromeBtn function palindromeBtn_Click() { //Check if the word in our textbox is a palindrome while the casing is sensative isPalindrome(getElementById("palindromeText").value, false); } // Declare a new function with a string parameter function isPalindrome(word, ignoreCasing) { // Create a new instance of a blank string var backwards = ""; // Create a new instance of an integer and set it to our parameter's length var i = word.length; // Loop while i > 0 while(i--) { // Add the letter we are on in the iteration to the backwards word backwards += word.charAt(i) } // Check if we are ignoring the casing or not if (ignoreCasing) { // If the word is the same as the backwards word then it's a palindrome if (word.toUpperCase() == backwards.toUpperCase()) { alert(word + " is a palindrome.") // Otherwise it's not... } else { alert(word + " is NOT a palindrome.") } } else { // If the word is the same as the backwards word then it's a palindrome if (word == backwards) { alert(word + " is a palindrome.") // Otherwise it's not... } else { alert(word + " is NOT a palindrome.") } } }
-
Mar 11th, 2014, 12:55 PM
#7
Re: [RESOLVED] [JS]Get value of textbox
Can you post your HTML as well, please?
-
Mar 11th, 2014, 01:27 PM
#8
Re: [RESOLVED] [JS]Get value of textbox
Sure:
Code:
<label>Check For Palindrome</label>
<input id='palindromeText' type='text' />
<input id='palindromeBtn' type='button' value='Submit' />
-
Mar 11th, 2014, 01:33 PM
#9
Re: [RESOLVED] [JS]Get value of textbox
Don't know how I didn't see this before.
Two things.
#1
Code:
document.GetElementById("palindromeBtn").onclick = palindromeBtn_Click;
Should be
Code:
document.getElementById("palindromeBtn").onclick = palindromeBtn_Click;
JavaScript is case sensitive, and it is getElementById, not GetElementById.
#2 In your palindromeBtn_Click function, you're just calling getElementById, not document.getElementById, so it thinks you're calling a custom function instead of one associated with the document object.
I'm also not sure if you're commenting so much so you can see what you're doing, but a lot of your comments are just wasted space. You'll always know that
Code:
var backwards = "";
Is setting the variable backwards = "". There is no point to the comment... I only bring that up because I just recently did a code review of someone who was doing the same thing. If you're just doing it to reiterate what you're doing, so you can remember better, then this is a moot point.
Last edited by kfcSmitty; Mar 11th, 2014 at 01:36 PM.
-
Mar 11th, 2014, 01:38 PM
#10
Re: [RESOLVED] [JS]Get value of textbox
Ah ok cool. Changing both of those gets it to work. Thank you so much for your patience.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|