The converter is working fine, it looks for a match to the input and if it finds one, it converts it to the new value.
The problem I am running into is that I can output the new value with document.write(userInput);
But I dont know how to format or add html and text to the output. Help!
<!DOCTYPE html>
<html>
<body>
<h1>Value Converter</h1>
<input type="text" id="userInput"=>Enter the Value</input>
<button onclick="test()">Submit</button>
<script>
function test()
{
var userInput = document.getElementById("userInput").value;
if(userInput == "xxxx") {
userInput="yyyy";
}
else if(userInput == "yyyy") {
userInput="zzzz";
}
else {
userInput="Not Found";
}
document.write("<br /><br /><b> The equivalent value is: </b>") + (userInput) + ("< br /><br /><b>Click here to Start Over</b>");
}
// Need to fix the "reset" to go back to restart the program
</script>
</body>
</html>
Change
document.write("<br /><br /><b> The equivalent value is: </b>") + (userInput) + ("< br /><br /><b>Click here to Start Over</b>");
For
document.write("<br /><br /><b> The equivalent value is: </b>" + userInput + "< br /><br /><b>Click here to Start Over</b>");
You should setup the html the way you want it to look, and then modify it using innerHTML or whatever DOM function/attributes instead of overwriting the page or having to reload it.
HTML
<h1>Value Converter</h1>
<input type="text" id="userInput" placeholder="Enter a value" />
<div>
<span>The equivalent value is: </span>
<span id="output">Enter a value and submit first</span>
</div>
<button onclick="test()">Submit</button>
JS
function test() {
var userInput = document.getElementById("userInput").value;
var converted = "";
switch(userInput){
case "someXXX":
//Do whatever code here
converted = "yyy";
break;
case "someYYY":
//Do whatever code here
converted = "zzz";
break;
default:
//Do whatever when all else fails
converted = "Not found";
break;
}
var output = document.getElementById("output");
output.innerHTML = converted;
}
Note that I changed your if statements to a switch/case
JSFiddle Demo
Related
How would I make commands for an input tag. For example, when you type !echo 'test' in an text input it would edit the content of a p tag
I tried this
<input type="text id="input" onchange="update()"/>
<p id="output"></p>
function update(){
var x = document.getElementById("input").value;
if(x == "!echo ", args){
document.getElementById("output").innerHTML = x;
}
}
If I understand the question correctly, you want to show the text that appears after the command "!echo". You're very close to getting it done. I've used the startWith method on the string of x to ensure the '!echo' command is at the beginning of the input. If that's true then we strip off the command using the replace method. I hope that's what you're looking for.
function update(){
var x = document.getElementById("input").value;
if (x.startsWith("!echo ")) {
document.getElementById("output").innerHTML = x.replace('!echo ', '');
}
}
<input type="text" id="input" onchange="update()"/>
<p id="output"></p>
Your question is unclear AMO.
Here's the result if you type !echo 'test' in your input tag.
If that's not the result your expect please update your question.
Feel free to add more details if it's not the goal you want.
I don't understand exactly what You want to do...
Have a nice day.
<input type="text" id="input" onKeyUp="update('\'test\'')">
<p id="output"></p>
function update(args){
var x = document.getElementById("input").value;
if(x == "!echo "+ args){
document.getElementById("output").innerHTML = x;
}else{
document.getElementById("output").innerHTML ="";
}
}
I am trying to create a simple web application. Like in Facebook chat when I enter "(Y)" it turns into the thumbs up icon. Similarly I am trying to do something like that with the following code. But it is not working for me. I am not expert with JavaScript. I need some help that what's wrong with the code?
And I made the code in a way that if i enter "y" it will return LIKE. I want to know how to show an icon after "y" input.
<html>
<head>
<title>Emogic</title>
</head>
<body>
<input type="text" id="input">
<input onclick="appear()" type="submit">
<p id="output"></p>
<script>
function appear(){
var value = document.getElementByid("input").value
var result = document.getElementById("output").innerHTML
if(value == "y"){
result = "LIKE"
}
else if(value == ""){
alert("You must enter a valid character.");
}
else{
alert("Character not recognised.");
}
}
</script>
</body>
</html>
There are a few issues/typo in your code :
it's document.getElementById(), with a capital I in Id.
result will be a string, containing the innerHTML of your element, but not a pointer to this innerHTML : when you then set result to an other value, it won't change the element's innerHTML as you expected. So you need to create a pointer to the element, and then set its innerHTML from the pointer.
The quick fix of your code would then be :
function appear() {
var value = document.getElementById("input").value;
var output = document.getElementById("output");
if (value == "y") {
output.innerHTML = "LIKE";
} else if (value == "") {
alert("You must enter a valid character.");
} else {
alert("Character not recognised.");
}
}
<input type="text" id="input" value="y">
<input onclick="appear()" type="submit">
<p id="output"></p>
But you'll find out that your user will have to enter exactly "y" and only "y" for it to work.
I think you should use instead String.replace() method with a regular expression to get all occurences of a pattern, i.e, for "(Y)" it could be
function appear() {
var value = document.getElementById("input").value;
var output = document.getElementById("output");
// The Regular Expression we're after
var reg = /\(Y\)/g;
// your replacement string
var replacement = 'LIKE';
// if we found one or more times the pattern
if (value.match(reg).length > 0) {
output.innerHTML = value.replace(reg, replacement);
} else if (value == "") {
alert("You must enter a valid character.");
} else {
alert("Character not recognised.");
}
}
<input type="text" id="input" value="I (Y) it (Y) that">
<input onclick="appear()" type="submit">
<p id="output"></p>
Given textarea is a textarea element with id 'textareabox', how can I check if it contains a string within it?
var textarea = document.getElementById('textareabox');
var word = something;
if (!textarea.contains(word))
{
textarea.value += word;
}
You can use .value, as:
var textarea = document.getElementById('textareabox');
var word = 'something';
var textValue=textarea.value; //-> don't use .innerHTML since there is no HTML in a textarea element
if (textValue.indexOf(word)!=-1)
{
alert('found')
}
You could do something like this:
var textarea = document.getElementById('textareabox').value;
if (texarea.match(word) != null) {
// do some stuff
}
A better regex than what I did but I don't know regex all that well (forgive me regex ignorance).
body {
background-color: red;
}
<html>
<h1>#mywebsite</h1>
<body>1+1=2?(yes <strong>or</strong> no)</body>
<input type="text" id="text" placeholder="text here"></input>
<button type="button" id="u" onclick="run()">submit</button>
<script type="text/javascript">
var a = 1;
function run() {
if (document.getElementById("text").value.includes("yes")) {
alert("correct!");
/*if the textbox includes "yes" it will say you got it right; basically whatever the input your user puts into the textbox it will test if the users sentence contains "yes" it alerts "correct!" into html if its wrong well it alerts "Try again!" the thing is, no matter what, if yes is in the sentance it will still say its correct.*/
/*if the snippet will not work use a different website to put code on */
document.body.innerHTML += "<li>attempt #" + a + ": correct";
a++
}
else {
alert("try again!")
document.body.innerHTML += "<li>attempt #" + a + ": try again";
a++
}
}
</script>
I'm new to Javascript and don't understand the following behaviors.
When the textarea is empty, the "process" code doesn't recognize it as null, and doesn't prompt for text.
When there is text in the textarea, the "process" code does not display the text in the alert. It seems this may be a scope problem I think all my variables are global.
HTML code:
<input type="button" name="btnProcessTA" onclick="myTextArea('process')" value="Process Text Area" />
<input type="button" name="btnClearTA" onclick="myTextArea('clear')" value="Clear Text Area" />
<form id="formExample" action="" method="get">
<label for="textAreaField">A text area field</label>
<textarea name="textAreaField" id="textAreaField" rows="4" cols="50"></textarea>
</form>
Javascript code:
<script type="text/javascript">
function myTextArea(op)
{
oTextArea = document.getElementById("textAreaField");
textAreaValue = oTextArea.value;
alert(op + "\n" + oTextArea + "\n" + textAreaValue);
switch (op){
case "clear":
oTextArea.value = "";
alert("Clearing");
break;
case "process":
if (textAreaValue = "")
alert("Would you please enter some text?");
else
alert("You entered:\n\n" + textAreaValue);
break;
default : alert("unknown op code");
}
}
</script>
Change
if (textAreaValue = "")
to
if (textAreaValue === "") // or ==
You are performing assignment instead of doing a comparison.
To compare, you have to use == instead of = :)
case "process":
if (textAreaValue == "")
alert("Would you please enter some text?");
else
alert("You entered:\n\n" + textAreaValue);
break;
if (textAreaValue = "")
The single equal sign in the if statement is interpreted as an assignment (It doesn't throw an error because technically it's correct syntax, but many people make this mistake by using a single equal sign instead of the double equal sign). The correct syntax would be the triple equal sign if you are intending to compare instead of assign.
if (textAreaValue === "")
I have a form constrained by validation code.
ex. userName has to have alphabet characters.
And hence returns true or false.
function isAlphapet()
{
var alphaExp = /^[a-zA-Z]+$/;
var namee=document.validation.userName.value;
var nalt=document.getElementById('name1');
if(namee!="")
{
if(!namee.match(alphaExp))
{
nalt.innerHTML="<font color='red'> Invalid Name: " + document.validation.userName.value + "</font>";
document.validation.userName.focus();
document.validation.userName.value="";
//This will remove the success class if the user tries to modify it incorrectly.
document.getElementById("userName").className = document.getElementById("userName").className.replace(" validationSuccess", "");
//This is calling the css class name validationError to color the text box border in red if there is an error.
//Leaving the replacing attribute empty incase the user hasn't input the correct string.
document.getElementById("userName").className = document.getElementById("userName").className + " validationError";
return false;
}else{//if it's validated correctly
nalt.innerHTML="";
//The text box should be green.
document.getElementById("userName").className = document.getElementById("userName").className + " validationSuccess";
return true;
}
}
else if(namee.length==0) { //if the user leaves it blank.
nalt.innerHTML="<font color='red'> Enter Name</font>";
document.getElementById('name1').focus();
document.getElementById("userName").className = document.getElementById("userName").className.replace(" validationSuccess", "");
document.getElementById("userName").className = document.getElementById("userName").className + " validationError";
//The above is explained on line 27+.
return false;
}
}
and in the form for the userName text box I have:
Your Name:<br /><input name="userName" id="userName" onBlur="isAlphapet()" type="text" size="20" maxlength="25" /><br />
I need my button to be enabled once the above returns true. But for some reason isAlphapet is not returning anything when I try to use it in JScript within the body.
Does anyone have a solution?
Much appreciated.
EDIT:
Thank you for responding Srini.
Hmm. No the entire validation function stopped working after I made the changes. What i'm trying to achieve is a little simpler than what it sounds like. I need an if statement or something like the following:
if (isAlphapet()== true && emailvalid()== true && browserValid()==true){
document.validation.sumb.disabled=false;
}
else{
document.validation.subm.diabled=true;
}
Where validation is the name of my form. I've tried to use this in the header and in the body. It doesn't recognize the return value of my functions in either. But the button disable and enable works ONLY after the /form tag
try this one
<html>
<head>
<script type="text/javascript">
function isAlphapet()
{
var alphaExp = /^[a-zA-Z]+$/;
var namee=document.getElementById('userName').value;
var nalt=document.getElementById('name1');
if(namee!="")
{
if(!namee.match(alphaExp))
{
alert(namee);
nalt.innerHTML="<span style='color:red;'> Invalid Name: " + namee + "</span>";
document.validation.userName.focus();
document.validation.userName.value="";
//This will remove the success class if the user tries to modify it incorrectly.
document.getElementById("userName").className = document.getElementById("userName").className.replace(" validationSuccess", "");
//This is calling the css class name validationError to color the text box border in red if there is an error.
//Leaving the replacing attribute empty incase the user hasn't input the correct string.
document.getElementById("userName").className = document.getElementById("userName").className + " validationError";
return false;
}
else{//if it's validated correctly
nalt.innerHTML="";
//The text box should be green.
document.getElementById("userName").className = document.getElementById("userName").className + " validationSuccess";
return true;
}
}
else if(namee.length==0) { //if the user leaves it blank.
nalt.innerHTML="<font color='red'> Enter Name</font>";
document.getElementById('name1').focus();
document.getElementById("userName").className = document.getElementById("userName").className.replace(" validationSuccess", "");
document.getElementById("userName").className = document.getElementById("userName").className + " validationError";
//The above is explained on line 27+.
return false;
}
}
</script>
</head>
<body>
<div style="float:left">
<form>
Your Name:<br /><input name="userName" id="userName" onBlur="isAlphapet()" type="text" size="20" maxlength= "25" /><br />
</form>
</div>
<div id="name1" style="float:left"></div>
</body>
</html>