How do i get input from body - javascript

I am trying to make a code that takes in input from the body directly and prints it in real-time on the body as well. But what happens is when I actualy type on the body (meaning in mid-air) it registers that i've typed something and the hello disappears but instead of showing what i've typed it gives me undefined in it's place. Here's the code:
<body id="bod" onkeypress="keypres()">
<h1 id="txt">hello</h1>
<script>
function keypres(){
var x = document.getElementById("bod").value;
document.getElementById("txt").innerHTML = x;
}
</script>
</body>

You have to follow code below
<body id="bod" onkeypress="keypres(event)">
<h1 id="txt">hello</h1>
</body>
<script>
function keypres(event){
if(event.charCode=='32'){
document.getElementById("txt").innerHTML = event.key;
}
else{
document.getElementById("txt").innerHTML += event.key;
}
}
</script>

Related

JavaScript not showing any alert dialog

<html>
<head>
<title>BD Home page</title>
<style>
body { background-color:red; }
p { background-color:yellow; }
div { background-color:green; }
</style>
</head>
<body>
<script>
function mf() {
Var x = new Date();
alert("Today is: " + x);
}
</script>
<button onclick="mf()">Click</button>
<div>Hellllllooooo</div>
<p>Hello this is html</p>
</body>
</html>
Hello I am a beginner programmer. In the error code it says mf is not defined on line 1:1, cannot understand that. Is it important to enclose an alert dialog box under a function?
Use var instead of Var. Javascript var keyword must be simple letters
Remove Var before the x or replace it by var ("v" lowercase).

onkeyup event in textarea

I have a very basic input/output structure in HTML:
<textarea id="input" onkeyup="sendCode()">
Hello World!
</textarea>
<div id="output"></div>
And I have JS function that should pass everything from input to output:
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.innerHTML;
}
The sendCode() function works when I call it manually, but it seems that onkeyup event not firing in this textarea.
Here is jsfiddle: http://jsfiddle.net/mudroljub/y5a2n8ab/
Any help?
UPDATE: jsfiddle is updated and working now.
Use value since it's not a content text but a value property
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.value;
}
And a working demo here
I would first like to point out that this will not run because the code runs before the HTML exists, so first off, put these lines inside a function:
window.onload= function anyname() {
var input = document.getElementById("input");
var output = document.getElementById("output");
}
Secondly, try using either:
editor.onkeyup = "sendCode()"
in your script area or at the top of the new function i created:
editor.addEventListener(keyup,sendCode,false)
Basically when a key goes up in that area it calls the sendCode() function. The false is if you don't want to use capture which I think is default anyway but just to be safe.
Basically java script is not that dynamic.So a better option is to
use jQuery.
[Note:- "jquery-2.2.2.min.js" given in src, in script tag,
is Jquery Library file codes can be copied from following link :http://code.jquery.com/jquery-2.2.2.min.js]
Just copy the contents from above link,into a textfile , save it by the name "jquery-2.2.2.min.js"
or any other name as you wish.The src of script should contain the same.
The "jquery-2.2.2.min.js" should be in the same directory where
you have the html file. Otherwise full path to be mentioned.
Here is the answer to your question.
<html>
<head>
<title>Dynamic TextArea</title>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("textarea").keyup(function(){
sendCode();
});
});
function sendCode(){
document.getElementById("output").innerHTML =
document.getElementById("input").value;
}
</script>
</head>
<body>
<form>
<textarea id="input">
Hello World!
</textarea>
</form>
<span id="output"></span>
</body>
</html>
If you have any doubts please ask.
I am sure once you learn to use jQuery you would forget javascript.
Where do you define the sendCode() function? It might not exist at the point where you create your text area.
This snippet should work:
<textarea id="editor">
Hello World!
</textarea>
<div id="output"></div>
<script type="text/javascript">
var editor = document.getElementById("editor");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = editor.value;
}
editor.addEventListener('keyup',sendCode);
</script>

How to change an html tag with Javascript? [duplicate]

This question already has an answer here:
dynamically changing HTML tag
(1 answer)
Closed 9 years ago.
I want to display the text from a string into an HTML tag without moving to next page and display it.
<body>
<div>
<label id="lbl1">Label </label>
<button id="btn1" onclick="display()">Click </button>
<script>
function display() {
var str="Hello World";
document.write(str);
}
</script>
</div>
</body>
How do I edit the contents of the label tag?
Common …
document.getElementById('lbl1').innerHTML = str;
function display() {
var str="Hello World";
var label = document.getElementById('lbl1');
label.innerHTML = str;
}
<body>
<div>
<label id="lbl1">Label </label>
<button id="btn1" onclick="display()">Click </button>
<script>
function display() {
var str="Hello World";
var label = document.getElementById("lbl1");
label.innerText = str;
}
</script>
</div>
</body>
When you click the button, the function display() is run, and the label tag's text is changed to "Hello World".
Use document.getElementById("lbl1").innerHTML = display(); and add a return statement inside the function:
function display()
{
var str="Hello World";
return str;
}
You edit the contents in a similar manner: document.getElementById("lbl1").innerHTML = "New content...";.
You could also modify your display() function a little bit to get the desired result:
function display()
{
var str="Hello World";
var label = document.getElementById("lbl1");
label.innerHTML = str;
}
Another way:
window.onload = function()
{
var button = document.getElementById("btn1");
button.onclick = function()
{
document.getElementById("lbl1").innerHTML = "Hello World";
}
}
The last way is the most desired and it's the best to put JavaScript code inside another file and attach it via the src attribute of the script element.
Let's provide a complete example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<label id="lbl1">Label </label>
<button id="btn1">Click </button>
</body>
</html>
Then inside the JavaScript file you just register various events:
//JavaScript
window.onload = function() //You have to ensure that everything has loaded
{
var button = document.getElementById("btn1");
button.onclick = function()
{
document.getElementById("lbl1").innerHTML = "Hello World";
}
}
It's generally considered the best way to register events in a separate JavaScript file because of performance and maintenance simplicity gains. You can read more about it here.

Enter variable name in textbox and get corresponding value

I have created 3 variables a,b,c. I have assigned values to a and b and have also made a textbox. What I want to do is enter the name of a the variable in the textbox and click the button, then the textbox should should display the value assigned to that variable. It maybe very simple but I do not know what I did wrong.
Here is the FIDDLE
<html>
<head>
<script>
function display(){
var a = 2;
var b = 3;
var c = document.getElementById("b1").value;
document.getElementById("demo").innerHTML=c;
}
</script>
</head>
<body>
<input type="text" id="b1">
<button type="button" onclick="display()">Display</button>
<p id="demo">Update Value.</p>
</body>
</html>
​
Your easiest choice would be to assign your variables to a object, like this:
var vars;
function display() {
var value = document.getElementById("b1").value;
vars = {
a: 2,
b: 3,
c: value
}
if (vars.hasOwnProperty(value)) { // If the entered value is a variable name
document.getElementById("demo").innerHTML = vars[value]; // Display the variable
} else { // Otherwise
document.getElementById("demo").innerHTML = value; // display the value
}
}
Working example
The if/else can be replaced with this, to make it a little shorter:
document.getElementById("demo").innerHTML = vars.hasOwnProperty(value) // If
? vars[value] // Then
: vars.c; // Else
Try this way:
<html>
<head>
<script>
function display(){
var a = 2;
var b = 3;
var c = document.getElementById("b1").value;
if(c==a){
document.getElementById("demo").innerHTML='a';
}
if(c==b){
document.getElementById("demo").innerHTML='b';
}
}
</script>
</head>
<body>
<input type="text" id="b1">
<button type="button" onclick="display()">Display</button>
<p id="demo">Update value.</p>
</body>
</html>
DEMO
What you are looking for is the eval() method (Which, do a quick google search, it is not recommended).
<script>
function display(){
var a = 2;
var b = 3;
var c = document.getElementById("b1").value;
document.getElementById("demo").innerHTML=(eval(c));
// if user enters b in the input field, then the html in demo will be 3
// if user enters a in the input field, then the html in demo will be 2
}
</script>
Again, not recommended!
If you declare variables directly in you script-element they are created as properties of the window-object and can be accessed as such. Thus just update your script like the following to show the contents of the variables:
<html>
<head>
<script>
var a = 2, b = 3;
function display() {
var strVarName = document.getElementById('b1').value;
if(window.hasOwnProperty(strVarName)) {
document.getElementById('demo').innerHTML = window[strVarName];
} else {
document.getElementById('demo').innerHTML = 'Variable ' + strVarName + ' does not exist.'
}
}
</script>
</head>
<body>
<input type="text" id="b1">
<button type="button" onclick="display()">Display</button>
<p id="demo">Update Value.</p>
</body>
</html>
This won't work if you declare the variables inside the display function, but this doesn't seem like a thing you would do if this code were to be used in a system to anything beside this one simple function.

Why is this Javascript code not writing to the webpage?

I have just started learning Javascript. I want "Hello World!" to be written to a webpage once a user clicks a button. I have tried this:
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
document.write("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" />
</form>
</body>
</html>
I can get it to do a window.alert("Hello World!") but not do document.write("Hello World!") for some reason. What happens is the button disappears and no text is displayed. My guess is that the problem is in the document.write but I do not know how to work around it. Any suggestions?
Because the document has already been written at that point. You can set text like so:
<button id="lol">blah</button>
<script>
function setText( obj, to ) {
obj.textContent? obj.textContent = to : obj.innerText = to;
}
var lol = document.getElementById('lol')
lol.onclick = function() {
var p = document.createElement('p');
document.body.appendChild(p);
setText( p, 'hi' );
}
</script>
Another popular but often looked down technique would be innerHTML.
Document.write is used to write to the currently loading HTML file. Once the page has been loaded, and a user begins interacting with the page, document.write is useless.

Categories