I cannot get value of input, why? Thanks for your answer!
This is the code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="fullname"/>
<button id="button">button</button>
</body>
<script>
var name = document.getElementById("fullname").value;
var btn = document.getElementById("button");
btn.onclick = function(){alert(name)};
</script>
</html>
Script tag need to be in the body tag
You need to get the value when you have entered it
Working plunk
<script>
var btn = document.getElementById("button");
btn.onclick = function(){
var name = document.getElementById("fullname").value;
alert(name);
};
</script>
Related
I have a simple program and some data strings that I want to pass to HTML page that hosted locally, but I'm getting error: ReferenceError: document is not defined
There's my .js file index.js:
let some_string = "some data";
document.getElementById("dataButton").onclick = function(){
var paragraph = document.createElement("p");
var text = document.createTextNode(some_string);
paragraph.appendChild(text);
var element = document.getElementsByTagName("body")[0];
element.appendChild(paragraph);
}
And there's my HTML test.html:
<!DOCTYPE html>
<html>
<head>
<title>New title</title>
</head>
<body>
<h1>Data page</h1>
<button id="dataButton">Add data</button>
<script src="index.js"></script>
</body>
</html>
Many thanks if someone come up with idea what am I doing wrong!
Update your files to the following
let some_string = "some data";
const dataButton = document.getElementById("dataButton");
dataButton.addEventListener("click", () => {
var paragraph = document.createElement("p");
var text = document.createTextNode(some_string);
paragraph.appendChild(text);
var element = document.getElementsByTagName("body")[0];
element.appendChild(paragraph);
});
<!DOCTYPE html>
<html>
<head>
<title>New title</title>
</head>
<body>
<h1>Data page</h1>
<button id="dataButton">Add data</button>
<script src="./index.js"></script>
</body>
</html>
I have an input here with no default value set for, and I want to console.log the inserted value of the input when the button is clicked, but each time I click on the button, it logs empty, and not the inserted value of the input.
What might I be missing here?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Box Creator</title>
<style>
</style>
</head>
<body>
<label>Please enter a color :
<input type="text">
</label>
<br><br>
<button>CREATE</button>
<script>
let value = document.getElementsByTagName("input").item(0).value ;
// let valuePart = value.split(",") ;
document.querySelector('button').onclick = function () {
console.log(value) ;
}
</script>
</body>
</html>
Here is the correct code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Box Creator</title>
<style>
</style>
</head>
<body>
<label>Please enter a color :
<input type="text">
</label>
<br><br>
<button>CREATE</button>
<script>
//let value = document.getElementsByTagName("input").item(0).value ;
// let valuePart = value.split(",") ;
document.querySelector('button').onclick = function () {
let value = document.getElementsByTagName("input").item(0).value ;
console.log(value) ;
}
</script>
</body>
</html>
In your script, the variable value is assigned the value in the beginning and not when the button is clicked. Move this code into the onclick handler.
document.querySelector('button').onclick = function () {
let value = document.getElementsByTagName("input").item(0).value ;
console.log(value) ;
}
You need to get the value when the user clicks. What you did in your code was just to take the value one time. This variable would not change . Try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Box Creator</title>
<style>
</style>
</head>
<body>
<label>Please enter a color :
<input type="text">
</label>
<br><br>
<button>CREATE</button>
<script>
// let valuePart = value.split(",") ;
document.querySelector('button').onclick = function () {
let value = document.getElementsByTagName("input").item(0).value ;
console.log(value) ;
}
</script>
</body>
</html>
If you needed the value to be a global then you could also do this :
let value ;
document.querySelector('button').onclick = function () {
value = document.getElementsByTagName("input").item(0).value ;
console.log(value) ;
}
What you need to understand here is the scope and the lifecycle of a variable.
When you declare a variable like this
let value = document.getElementsByTagName("input").items(0).value
What you actually are doing is getting the value of the input element but only one time. That means that if the value of the input changes , it won't update the appropriate variable.
I am trying to create a button in javascript and assigning HTML entity code ⛨ to it. This is the HTML entity code of down arrow. Instead of showing the down arrow, the entire code is displayed in the button as is.
Below is how i am trying to achieve it
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
var btn = document.createElement("input");
btn.setAttribute('type','button');
btn.setAttribute('value','▼');
document.body.appendChild(btn);
</script>
</body>
</html>
Below is the output of my code
I expect that the button should display down arrow but for some reason it is not showing.
Try replacing ⛨ with \u26E8, try \u2193 for down arrow. JsFiddle, ref
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript">
var btn = document.createElement("input");
btn.setAttribute('type','button');
btn.setAttribute('value','\u26E8');
document.body.appendChild(btn);
btn = document.createElement("input");
btn.setAttribute('type','button');
btn.setAttribute('value','\u2193');
document.body.appendChild(btn);
</script>
</body>
</html>
Try like this,
<html>
<head></head>
<body>
<button>⛨</button>
<script type="text/javascript">
var btn = document.createElement("input");
btn.setAttribute('type','button');
btn.setAttribute('value','\u26E8');
document.body.appendChild(btn);
</script>
</body>
</html>
First button from DOM, Second one from Script.
You should use innerHTML instead of setAttribute:
var btn = document.createElement("input");
btn.setAttribute('type','button');
btn.innerHTML = '⛨';
document.body.appendChild(btn);
http://jsfiddle.net/dapx0nsy/
I started to mess around with JS yesterday but I'm like the biggest noob ^^,
I'm trying to make a button, that can show and hide a text input box with one click.
I have used createElement("input") to create the box but can anyone help me how to use removeChild properly? =D Cause I can't get it to hide. I want to use just html and js for this
Thanks!
/gruffmeister # scotland
Here's a pure javascript example for you:
var elem = document.createElement("input");
var btn = document.createElement("button");
var txt = document.createTextNode("Hide Input");
elem.id = "hideme";
btn.appendChild(txt);
document.body.appendChild(elem);
document.body.appendChild(btn);
btn.addEventListener( 'click', function(){
var input = document.getElementById("hideme");
document.body.removeChild(input);
} );
Why not use a simple jQuery approach:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$('button').click(function() {
$('p').toggle;
$("#myTextField").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<input id="myTextField" type="text" name="myTextField" value="">
</body>
</html>
I am new to JavaScript and I am trying to do something very simple. I wan to appear array[1] text in firstDiv's innerHTML when I click button.
I have followed all instructions but still it's not working.
<!doctype html>
<html>
<head>
<title>Learning Javascript</title>
<meta charset="utf-8" />
<meta htttp-equiv="content-type" contents="text/html; charset-utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<button id="stylesChanger">Change the text !</button>
<div id="firstDiv">This sis some text</div>
<script type="text/javascript">
var myArray=new Array[];
myArray[0]="pizza";
myArray[1]="chocolate";
document.getElementById("stylesChanger").onclick=function(){
document.getElementById("firstDiv").innerHTML=myArray[1];
}
</script
</body>
</html>
change your var myArray=new Array[]; to var myArray=[];
Then it will work
var myArray=[];
myArray[0]="pizza";
myArray[1]="chocolate";
document.getElementById("stylesChanger").onclick=function(){
document.getElementById("firstDiv").innerHTML=myArray[1];
}
<button id="stylesChanger">Change the text !</button>
<div id="firstDiv">This sis some text</div>
This code will make sure you get the first element of myArray on button click. And sets the div text as myArray first element.
Working Sample: JSFIDDLE
var myArray = new Array();
myArray[0] = 'pizza';
myArray[1] = 'chocolate';
var btn = document.getElementById('stylesChanger');
btn.addEventListener('click', getArrayFirstElement, false);
function getArrayFirstElement(){
document.getElementById("firstDiv").innerHTML = myArray[0];
}