I am trying to create a simple HTML program that will allow the user to input a number or word, then if the userInput matches what I have defined, it changes that input to something else, then outputs the new value on the screen.
Also looking for a button to reset the program (at any time to start over)
Any ideas?
<!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;
//Need to add If, else if, else to change the value of userInput
// for example, If xxxx value, set to yyyy, then output yyyy
document.write(userInput);
}
// Need to add a "reset" to go back to restart the program
</script>
</body>
</html>
Working better now with... but where does the reset go? How do I format the output? all noob questions yes
<!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(userInput);
}
// Need to add a "reset" to go back to restart the program
</script>
</body>
</html>
Convert the function to the following.
function test()
{
var userInput = document.getElementById("userInput").value;
if(userInput == "xxxx") {
// I forgot the updating part here.
document.getElementById("otherIdToWriteOutput").innerHTML = "yyyy";
}
}
You can also add the reset button. And remove the current text using
document.getElementById("id").innerHTML = ""; // remove the inner html.
Related
I'm trying to create a function that takes a users input and if it equals 10 then perform a function that will eventually print fizzbuzz to the screen from 0-10 but for now I'm just trying to get it to say "awesome" if the input == 10. Here is the code.
<!DOCTYPE html>
<html>
<head>
<title>Fizzbuzz Input Field</title>
<script src="scripts.js"></script>
</head>
<body>
<form>
<input type="number" id="userInput"></input>
<button onclick="fizzBuzz()">Go</button>
</form>
</body>
</html>
window.onload = function() {
alert("Page is loaded");
};
var fizzBuzz = function() {
var userInput = document.getElementById("userInput");
fizzBuzz.onclick = function() {
if(userInput.value == 10) {
document.write("awesome");
};
};
}
Grab the element from the input, in this case, "userInput". grab your button by querying it, or putting an id on it etc... Don't bother with putting a function on the HTML, avoid bad practice. Add an event listener to the button, check to see if it equals 10 and append your text, preferably somewhere suitable.
var input = document.getElementById("userInput");
var button = document.getElementsByTagName('button')[0]
button.addEventListener('click', function(a) {
if (input.value === '10') {
button.after("awesome");
}
})
<input type="number" id="userInput">
<button>Go</button>
I think what you are looking for is eval before using it, you should search the web for why eval is evil.
What you want is something like this:
var button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
// First we get the numeric value written to the input (or NaN if it's not a number)
var inputValue = parseInt(document.getElementById('userInput').value, 10);
// Define the element to which write the text (you usually want a DIV for this)
var outputElement = document.getElementById('outputDiv');
if ( ! isNaN(inputValue) ) {
outputElement.innerHTML = "awesome!";
}
else {
// The value is not a number, so just clean the result
outputElement.innerHTML = "";
}
});
Of course, for this to work, you should have at least:
<input type="number" id="userInput" />
<button id="myButton">Go</button>
<div id="outputDiv"></div>
I don't have any idea how you want the awesome to be displayed. Made it an alert. Have fun.
<script>
function fizzBuzz() {
var fizzBuzz = document.getElementById("userInput").value;
if(fizzBuzz != 10){
alert('Number is not equal to ten!');
}else {
alert('awesome');
}
}
</script>
You are setting a property 'onclick' of function 'fizzBuzz',
you should use the input event.
var userInput = document.getElementById('userInput');
userInput.oninput = function() {
if( this.value == 10 ) alert('awesome');
}
I am trying to use JavaScript in an online examination assignment in HTML. As a requirement of the project, we have to use text input forms as well as radio buttons and the like. I have dealt with the part of radio buttons but for some reason my text input forms do not work. My problem will be clearly stated using this code snippet from the main project:
<html>
<head>
<title></title>
<script type="text/javascript">
var test, name, matr, myname, count = 0;
function form(){
test = document.getElementById("test");
test.innerHTML = "Count = "+count;
test.innerHTML += "<form> \
First name:<br> \
<input type='text' name='name'><br>\
<button onclick='check()'>Submit Answer</button>";
}
function check(){
myname = document.getElementsByName("name");
if (myname[1].value == "myname")
{
count++;
}
form();
}
window.addEventListener("load", form, false);
</script>
</head>
<body>
<div id = "test"></div>
</body>
</html>
What this code aims to do is that when the user inputs "myname" into the form called 'First name' and clicks 'Submit', the counter on the top should increment.
Can someone please shed some light on what I am doing wrong and how it may be resolved.
As Pluto mentioned, arrays in javascript start at 0. You can also look at tinkering with the form element. It is not closed nor is the type, get or post specified. I got it working in the example below by removing the form completely. This is because the button press was trying to submit the form and therefore load a new page.
https://jsfiddle.net/jpm68eub/
var test, name, matr, myname, count = 0;
function form() {
test = document.getElementById("test");
test.innerHTML = "Count = " + count;
test.innerHTML += "</br> First name:<br> \
<input type='text' name='name'><br>\
<button onclick='check()'>Submit Answer</button>";
}
function check() {
myname = document.getElementsByName("name");
if (myname[0].value == "myname") {
count++;
}
form();
}
form();
you need to prevent the default action of the onclick event. To do this, try something like this:
function check(e){
e.preventDefault();
myname = document.getElementsByName("name");
if (myname[0].value == "myname")
{
count++;
}
form();
}
the above user was also correct about where javascript arrays start (they start at 0)
I have text box.
Users can enter Student Id into that.
Student id is in this format DIP0001.
First three letters should be DIP and the remaining 4 digits should be numeric and can only upto 4 characters.
So how can I check whether entered data is in this format using javascript.
Please help.....
You could build a regular expression pattern and test it against that value to see if it matches that exact pattern.
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<label for="studentId">Student ID</label>
<input id="studentId" type="text">
<button id="btn" type="button">Validate</button>
// Embedded script so that you don't have to load an external file
<script>
var input = document.getElementById('studentId');
var btn = document.getElementById('btn');
var pattern = /DIP+\d{1,3}/g;
btn.addEventListener('click', function(){
if(pattern.test(input.value)) {
alert('It enter code here`atches!');
}else {
alert('It does not match!');
}
});
</script>
</body>
</html>
JS FILE:
// This pattern looks something like this: DIP0000
var pattern = /DIP+\d{1,3}/g;
// studentId is the ID of the input field that contains the Student ID
var studentIdInput = document.getElementById('studentId');
// Check the pattern against the provided Student ID
if(pattern.test(studentIdInput.value)) {
alert('It matches the pattern!');
}
EDIT 1: I have built the functionality in the following JSFiddle: http://jsfiddle.net/vldzamfirescu/QBNrW/
Hope it helps!
EDIT2: I have updated the JSFiddle to match any other combinations up to 4 digits; check it out: http://jsfiddle.net/vldzamfirescu/QBNrW/1/ Let me know if it solved your problem!
try this code
<html>
<head>
<script>
function validate(val) {
if (val.value != "") {
var filter = /^[DIP]|[dip]+[\d]{1,4}$/
if (filter.test(val.value)) { return (true); }
else { alert("Please enter currect Student Id"); }
val.focus();
return false;
}
}
</script>
</head>
<body>
<input id="Text1" type="text" onblur="return validate(this);" />
</body>
</html>
Use Regular Expresions.
If found a valid Student ID, the pattern will return true:
function validateStudentId(id) {
var re = /DIP[0-9]{4}/;
return re.test(id);
}
// Edited for use with a click event:
document.getElementById('button').addEventListener('click', function(){
if( validateStudentId(document.getElementById('textBox').value) ){
alert('correct');
}else{
alert('invalid ID');
}
});
I'm writing a simple function just for fun for a friend, but my js function wont return x the way I want it.
I have a text field and a button. If a user inputs "no good lyer" x should return "Big Fucking Surprise!"
If a user inputs anything else with text, x should return "Leave her ass anyway!"
If a user doesn't input anything x should return "Make a decision!"
Here is my code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to make a decision about your ex.</p>
<p id="choice">Here is your Decision</p>
<form>
My Ex:<input type="text" name="myEx">
</form>
<button onclick="myLife()">Decide</button>
<script>
function myLife()
{
var x="";
if("myEx".text=="no good lyer")
{
x="Big Fu**ing Surprise!";
}
if("myEx".text!="no good lyer")
{
x="Leave her a** anyway!";
}
if("myEx".text=="")
{
x="Make a decision!"
}
document.getElementById("choice").innerHTML=x
}
</script>
</body>
</html>
Sorry but javascript strings don't have methods called text. your trying to get the value of the input <input type="text" name="myEx"> with 'myEx'.text, which is strange to say the least but you need to use normal people javascript. try getElementsByName('myEx')[0]
Add this variable to the top of your function myLife:
var myEx = document.getElementsByName('myEx')[0].value
change every line like this:
"myEx".text
to simply this
myEx
First of all you should use === and !== operator to check for conditions, Try the code below
To get a value from a input text use .value
<!DOCTYPE html>
<html>
<body>
<p>Click the button to make a decision about your ex.</p>
<p id="choice">Here is your Decision</p>
<form>
My Ex:<input type="text" id="myText" value="">
</form>
<button onclick="myLife()">Decide</button>
<script>
function myLife()
{
var myText = document.getElementById("myText");
var x="";
if(myText.value==="no good lyer")
{
x="Big surprise!";
}
if(myText.value!=="no good lyer")
{
x="Leave her!";
}
if(myText.value === "")
{
x="Make a decision!"
}
document.getElementById("choice").innerHTML=x
}
</script>
</body>
</html>
change your script to following
<script>
function myLife()
{
var x="";
if("myEx".text=="no good lyer")
{
x="Big Fu**ing Surprise!";
}
if("myEx".text!="no good lyer")
{
x="Leave her a** anyway!";
}
if("myEx".text==null)
{
x="Make a decision!"
}
document.getElementById("choice").innerHTML=x
}
</script>
I want to ask about the form in Javascript.
I want to do a game where the user enters the correct word, then an alert message will appear for this correct word. When the user does the first word correct, the program will display another word (to be corrected). But the problem which I faced that I can't make the form display again to continue the game.
I used:
var d = document.getElementById("form1"); d.style.visibility = "visible";
but it doesn't work!
This is my code:
<head>
<title>Word Decoder</title>
<script type="text/javascript">
function checkWord(word, score)
{
var ok = words[score].valueOf();
var ok1 = document.getElementById("wordid");
if(ok1.value == ok)
{
score ++;
alert("Correct, your score is: " + score);
var d = document.getElementById("form1");
d.style.visibility = "visible";
return false;
}
else
{
alert("Wrong Spelling");
return false;
}
}
</script>
</head>
<body>
<script type="text/javascript">
var words = new Array ("apple", "orange", "banana", "manago", "table");
var reWords = new Array ("alpep", "ergano", "aaabnn", "goamna", "lbeat");
var count = 0;
var score = 0;
"</br>";
</script>
<form id="form1">
<br>
<dir id="displayForm"
style="position: relative;
visibility: visible;
display: block">
<h3><b> <script> document.write(reWords[score]);</script> </b></h3>
<br>
Enter the correct word: <input type="text" value="" id="wordid"/>
<input type="submit"
value="Check Answer ??"
onclick="return checkWord(wordid, score);" />
</dir>
</form>
</body>
Again: I want the game will display a scrambled word and the user must unscrambled the word to move to the other word. The problem is I can't display the form again to make the user unscrambled the second, third etc. words.
Use d.style.display="none" to hide and d.style.display="block" to show.
Think your post got mangled, I don't see where you are hiding it in the first place.. Also, avoid using document.write if you don't need it... inject the element or use .innerHTML if you need to, but not document.write.