So I'm unable to register for change or input events that allow me to grab the data that was just changed and apply it somewhere else...
document.getElementById("fI").addEventListener("input", blabla);
function blabla() {
var something = document.getElementById("fI").innerHTML;
document.getElementById("example2").innerHTML = something+" continue the rest of the script here";
}
This code doesn't execute and I can't figure out why from the documentation...
Edit:
This is the only HTML on the page, I'm debugging this right now
<textarea id="fI"></textarea>
<button type="button" id='pressMe'>Press Me</button>
<textarea id="example2"></textarea>
I've also used <p> for the recipient of the changed innerHTML
I've tested this code all on it's own, just like this, and it didn't work, however I'm trying to connect the code to this event listener too
document.getElementById("pressMe").addEventListener("click",doSomething);
function doSomething () {
var something = prompt("Please enter something", "something");
if (something !== null) {
document.getElementById("fI").innerHTML = something;
}
}
Use .value to get/set the contents of a textarea element. You were using .innerHTML.
document.getElementById("pressMe").addEventListener("click", doSomething);
function doSomething() {
var something = prompt("Please enter something", "something");
if (something !== null) {
document.getElementById("fI").value = something;
}
}
document.getElementById("fI").addEventListener("input", blabla);
function blabla() {
var something = document.getElementById("fI").value;
document.getElementById("example2").value = something;
}
<textarea id="fI"></textarea>
<button type="button" id='pressMe'>Press Me</button>
<textarea id="example2"></textarea>
you are not retrieving the value of your textarea correctly. you should be using .value instead of .innerHTML
var something = document.getElementById("fI").value;
http://jsfiddle.net/6pL8qony/
Related
how would I get a textbox perform a function if a specific word is submitted. I have a robot that jumps on mousedown and I want it to jump if I write jump or write move in the textbox it does the move function. I tried few things but couldnt get it to work
Heres the code
<form id="formDiv" action="" >
Command the robot!: <input type="text" size="50" onkeydown="keyCode(event)">
</form>
<div id="canvasDiv" width="500" height="10"></div>
<script type="text/javascript" src="robotti.js"></script>
<script type="text/javascript">
prepareCanvas(document.getElementById("canvasDiv"), 500, 500);
document.getElementById("canvasDiv").onmousedown = function() {
jump(); }
//document.getElementById("canvasDiv").onkeypress = function() {
//move(); }
document.getElementById("canvasDiv").window.onkeypress = function(event) {
if (event.keyCode == 41) {
move();
}
}
</script>
This should work -:
var text = getElementById("canvasDiv").value;
if(text.includes("move") || text.includes("jump")){
jump();
getElementById("canvasDiv").value = "";
}
Please use onkeyup instead of onkeydown
<!DOCTYPE html>
<html>
<body>
<input type="text" id="canvasDiv" onkeyup="keyCode()" value="">
<script>
function keyCode(e) {
var text = (document.getElementById("canvasDiv").value).toLowerCase();
if(text == 'jump' || text == 'move'){
//call jump function here
alert("jump");
}
}
</script>
</body>
</html>
You shouldn't use HTML attributes like onkeydown etc. Use an EventListener instead. Register one on your input field, grab its value and check (either via switch or if...else) what the user entered. According to the user's input, execute your functions.
document.querySelector('input[type="text"]').addEventListener('keyup', function() {
switch (this.value) {
case 'move':
console.log('move!'); // Your actual function here
this.value = ''; // Reset value
break;
case 'jump':
console.log('jump!'); // Your actual function here
this.value = '' // Reset value
break;
}
});
Command the robot!: <input type="text" size="50">
Further reading:
Why is inline event handler attributes a bad idea in modern semantic HTML?
document.querySelector
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 want that the user can see the value of a variable by writing it's name in a textarea, simpliefied:
var money = "300$";
var input = "money"; //user wants to see money variable
alert(input); //This would alert "money"
Is it even possible to output (in this example) "300$"?
Thanks for help!
Instead of seprate variables, use an object as an associative array.
var variables = {
'money': '300$'
}
var input = 'money';
alert(variables[input]);
You can use an object and then define a variable on the go as properties on that object:
var obj = {}, input;
obj.money = "300$";
input = "money";
alert(obj[input]);
obj.anotherMoney = "400$";
input = "anotherMoney";
alert(obj[input]);
A simple way,you can still try this one :
var money = "300$";
var input = "money"; //user wants to see money variable
alert(eval(input)); //This would alert "money"
Here is an answer who use the textarea as asked.
JSFiddle http://jsfiddle.net/7ZHcL/
HTML
<form action="demo.html" id="myForm">
<p>
<label>Variable name:</label>
<textarea id="varWanted" name="varWanted" cols="30" rows="1"></textarea>
</p>
<input type="submit" value="Submit" />
</form>
<div id="result"></div>
JQuery
$(function () {
// Handler for .ready() called.
var variables = {
'money': '300$',
'date_now': new Date()
}
//Detect all textarea's text variation
$("#varWanted").on("propertychange keyup input paste", function () {
//If the text is also a key in 'variables', then it display the value
if ($(this).val() in variables) {
$("#result").html('"' + $(this).val() + '" = ' + variables[$(this).val()]);
} else {
//Otherwise, display a message to inform that the input is not a key
$("#result").html('"' + $(this).val() + '" is not in the "variables" object');
}
})
});
<script>
window.onload = function()
{
document.getElementById('btn').disabled=true;
function bar()
{
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var d=document.getElementById('uid').value;
if( re.test(d))
document.getElementById('btn').disabled=false;
}
};
</script>
<button type="button" id="btn" >Log-in</button>
<label for="uid">User Id</label><input type="text" name="uid" id="uid" onKeyUp="return bar()" />
I am trying to check whether the email id entered in the textbox uid is properly formatted or not and if the email id given matches the expression it will simply enable the btn button. when i execute the following nothing happen the button stays disabled if even the email id is formatted properly. HELP!
You have a scope issue. The bar() function is defined within the window.onload function, and therefore is not accessible from where you try to call it (the inline onkeyup handler).
Move the function into the global scope:
function bar() {
...
}
window.onload = function () {
document.getElementById('btn').disabled = true;
};
Or better still, attach the event inside the window.onload and remove the inline onkeyup completely.
DEMO
function bar() {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var d = document.getElementById('uid').value;
document.getElementById('btn').disabled = !re.test(d);
}
window.onload = function () {
var btn = document.getElementById('btn').disabled = true;
document.getElementById("uid").onkeyup = bar;
};
Using this way, bar can be defined either in the onload or in the global scope, both will work. Also, I changed the logic in bar(). It will now re-disable if you type a valid email, then make it invalid.
I am trying to create a text-based adventure game. I managed to figure out how to make text output in html's textarea through simple onclick button, but now I am trying to do something new. I am having trouble with doing same thing but with input text where users can write anything in the box and then click on the button. Right now, I am trying to make this program to check the user input against some flag (in this case, I set my flag equal to 'pizza') before it does something. Unfortunately, my code doesn't work at all. I think I don't completely understand how the input is being passed around in JavaScript's functions.
The JavaScript part:
function record(test) {
var input = document.getElementById('filename');
fileName = input.value;
if (fileName == "pizza") {
var obj=document.getElementById(test);
obj.value="is this showing up in the textarea???";
}
else {obj.value="wrong password!"; }
}
The html part:
<input name="filename" id="filename" type="text">
<a id="record_button" onclick="record('textarea1');" href="javascript:void(0);" title="Record">Perform Action</a>
<textarea wrap="virtual" cols="73" rows="10" id="textarea1"></textarea>
The problem is this block with your else statement, obj isn't declared. Because you have obj defined in the if statement above it is exclusive to that scope. Just define obj right above the if block.
--
function record(test) {
var input = document.getElementById('filename');
fileName = input.value;
var obj=document.getElementById(test);
if (fileName == "pizza") {
obj.value="is this showing up in the textarea???";
}
else {
obj.value="wrong password!";
}
}
Add an event listener using JS:
document.getElementById('record_button').onclick=function(){
record('textarea1');
}
Also, there were a couple things wrong with your function. Here it is with corrections:
function record(test) {
var input = document.getElementById('filename');
fileName = input.value;
var obj = document.getElementById(test);
if (fileName == "pizza") {
obj.value = "is this showing up in the textarea???";
}
else {
obj.value = "wrong password!";
}
}
You were using document.getElementByID on the second line, which is incorrect capitalisation
You were only defining obj conditionally, so the else clause always threw an exception.
Here is a demonstration: http://jsfiddle.net/uQpp7/1/