How to Get and Print a String Using HTML - javascript

I have a small project that I'm working on (dealing with getting a name and printing it with a string). The problem is that when I click on the button, nothing happens.
Code:
<!DOCTYPE html>
<html>
<head>
<link type = "css" rel="stylesheet" href = "css.css"/>
<script>
var button = document.getElementById('send');
var enter = document.getElementById('enter');
button.onclick function() {
var str = 'Hello ' + enter.value + ' how are you?';
alert(str);
}
</script>
<title>HAL 9000 SIM</title>
</head>
<body>
<p id=p1> What is your name? </p>
<br><br>
<input type = "text" id="enter" name = "entername"><br>
<input type = "button" id="send" value="Enter">
</html>
It's not complete, as you can probably tell, so any other pointers are greatly needed!

It seems you forgot the "=" sign after the button.click.
Check this:
<body>
<p id=p1>What is your name?</p>
<br>
<br>
<input type="text" id="enter" name="entername">
<br>
<input type="button" id="send" value="Enter">
--
var button = document.getElementById('send');
var enter = document.getElementById('enter');
button.onclick =
function () {
if(enter.value.length > 0)
{
var str = 'Hello ' + enter.value + ' how are you?';
alert(str);
}else
{
alert("Please input the required fields!");
}
};
http://jsfiddle.net/pg5k60rz/

First of all, you didnt assign to onclick your function
var enter = document.getElementById('enter');
button.onclick = function() {
var str = 'Hello ' + enter.value + ' how are you?';
alert(str);
}
secondly if you want your code work, but script before closing body tag

Related

addeventlistener function not working as expected

I am not able to see the data in firebase database after giving the input through UI. Can anyone please help?
<body>
<input id="username" type="text" placeholder="Name"><br/>
<input id="text" type="text" placeholder="Message"><br/>
<button id="post">Send</button><br/>
<div id="results"></div>
<script>
var myFirebase = new Firebase('https://webchat-a778f.firebaseio.com/');
var usernameInput = document.getElementByID("username");
var textInput = document.getElementByID("text");
var postButton = document.getElementByID("post");
postButton.addEventListener("click", function() {
myFirebase.push(usernameInput + " says: " + textInput);
textInput.value = "";
},false);
You have a syntax error
It should be
document.getElementById
The last d is in lowercase

onclick returns input from form instead of redirecting

I am just learning JS and I am trying to navigate to a different page based on the input from the user. /MenuDemo1/src/home.jsp
In the above the two text boxes are coming and after I enter the values and click on the button, I am successful in getting the uid and pwd but on click instead of the url in location.href, it is going to MenuDemo1/src/home.jsp?username=admin&password=admin.
<form name="form1" id="form1" >
First name: <input type="text" name="username"> <br> Last
name: <input type="password" name="password"> <br>
<button id="submit" onclick="validateform()">Submit</button>
</form>
<script>
var linkHome;
function validateform() {
var uid = document.getElementById("form1").elements[0].value;
var pwd = document.getElementById("form1").elements[1].value;
if (uid === "admin" && pwd === "admin") {
document.getElementById("demo1").innerHTML = "Found elements in the form.";
linkHome = "/MenuDemo1/src/adminHome.jsp";
} else {
linkHome = "/MenuDemo1/src/userHome.jsp";
}
location.href = linkHome;
}
</script>
Can someone please point it out what I am missing? TIA.
You have to attach the function to your submit for event :
because onclick will not trigger the reirection :
so first remove the onclick="validateform()"
and then assign the function to the submit event and put return false; to prevent send form to the post url ;
js should look like belllow :
var linkHome;
document.getElementById("form1").onsubmit = function validateform() {
var uid = document.getElementById("form1").elements[0].value;
var pwd = document.getElementById("form1").elements[1].value;
if (uid === "admin" && pwd === "admin") {
document.getElementById("demo1").innerHTML = "Found elements in the form.";
linkHome = "/MenuDemo1/src/adminHome.jsp";
} else {
linkHome = "/MenuDemo1/src/userHome.jsp";
}
location.href = linkHome;
return false;
}
My answer may not be correct, I am 11 and started programming about 9 months ago, so I am a noob. But I believe it is not working because you have no paragraph to where the data can be sent to, so when I ran the program and did this edit it worked.`'
Also i believe there is no page such as "/MenuDemo1/src/adminHome.jsp" to go to
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<form name="form1" id="form1" >
First name: <input type="text" name="username"> <br> Last
name: <input type="password" name="password"> <br>
<button id="submit" onclick="validateform()">Submit</button>
</form>
<p id="demo1"></p>
<script>
var linkHome;
function validateform() {
var uid = document.getElementById("form1").elements[0].value;
var pwd = document.getElementById("form1").elements[1].value;
if (uid === "admin" && pwd === "admin") {
document.getElementById("demo1").innerHTML = "Found elements in the form.";
linkHome = "/MenuDemo1/src/adminHome.jsp";
} else {
linkHome = "/MenuDemo1/src/userHome.jsp";
}
location.href = linkHome;
}
</script>
<link rel="stylesheet" href="style.css">
</head>
<body >
</body>
</html>`
You should try this :-
linkHome = window.location.protocol + "//" + window.location.host + "MenuDemo1/src/adminHome.jsp";
and
linkHome = window.location.protocol + "//" + window.location.host + "MenuDemo1/src/userHome.jsp";
Hope this helps!

Change content in an div through button click

Maybe this is duplicate, i don't know
But how do i so my text input changes into text ?
<input type='text' id='input_id' />
<button id='saveName'>Save name</button>
<div id='box_id'></div>
<script>
document.getElementById('saveName').addEventListener('click', function() {
var name = document.getElementById('input_id').value;
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
}, false);
</script>
So when the button is pressed the input-tag and the
button-tag changes
to the Username: text input
Almost like a login but without servers and emails etc.
Try the following code:
<input type='text' id='input_id' />
<button id='saveName' onClick="callMethod()">Save name</button>
<div id='box_id'></div>
<script>
function callMethod(){
var name = document.getElementById('input_id').value;
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
}
</script>
If you want both the input and button to disappear you could add this to your JavaScript:
document.getElementById('saveName').remove();
document.getElementById('input_id').remove();
JSFiddle
It will work sure.
<script>
function callMethod(){
document.getElementById('saveName').remove();
document.getElementById('input_id').remove();
document.getElementById('box_id').innerHTML = 'Welcome '+ document.getElementById('input_id').value;
}
</script>
Try this Fiddle example
HTML
<div id="login">
<input type='text' id='input_id' />
<button id='saveName'>Save name</button>
</div>
<div id='box_id'>a</div>
CSS
#box_id {display:none; background:#ccc;}
#login, #box_id {padding:20px; background:#eee;}
JS
document.getElementById('saveName').addEventListener('click', function() {
var name = document.getElementById('input_id').value;
$('#login').hide();
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
$('#box_id').css({'display': 'block' });
}, false);
It Will not required you to click or make button dissapear.
<input type='text' id='input_id' onblur="callMethod()" />
<div id='box_id'></div>
<script>
function callMethod(){
var name = document.getElementById('input_id').value;
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
}
</script>
I'm not sure what you want to do. But if you want to change input tag and button tag into form: Username: text remove these elements:
<input type='text' id='input_id' />
<button id='saveName'>Save name</button>
<div id='box_id'></div>
<script>
document.getElementById('saveName').addEventListener('click', function() {
var name = document.getElementById('input_id').value;
document.getElementById('input_id').remove();
document.getElementById('saveName').remove();
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
}, false);
</script>
Try this. Problem Solved, Accept if working.
<script>
function callMethod(){
var name = document.getElementById('input_id').value;
document.getElementById('box_id').innerHTML = 'Welcome ' + name;
document.getElementById('saveName').style.display="none";
document.getElementById('input_id').style.display="none";
}
</script>

Get element by input text id

what is wrong with the code? i have to get the text from the input text box after clicking on submit button, the input text value must be shown in paragraph.
<html>
<body>
<p id="demo"></p>
<br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()"></button>
<script>
function myFunction()
{
var x = document.getElementById("myList");
var txt = "Welcome ";
for (var i=0;i<x.length;i++)
{
txt = txt + x.elements[i].id + "br";
}
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>
You would want to use this code
document.getElementById('myList').value;
it will grab the value from the input box element.
Check here a demo
Check here no need to loop all the elements
You just need a id of the element so why are you looping it ?
Here is the source code of it
This is the javascript code looks like
function myFunction()
{
var x = document.getElementById("myList");
var txt = "Welcome ";
txt = txt + x.value + "br";
document.getElementById("demo").innerHTML=txt;
}
You want a value from the element so you have to take a value you can see in the functiont
x.value so it will retrive the value from the element and then your function will work i hope this will help you
There are two ways to fix it:
[1] Change x.length to x.value.length and x.elements to x.value.elements
The fiddle
[2] Change var x = document.getElementById("myList"); to var x = document.getElementById("myList").value;
And the fiddle, why not?
A text box has no property length, so I think you are referencing to its text? That's what this fix will do. (Also, it's better practice to use method 2.)
<html>
<body>
<p id="demo"></p>
<br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("myList").value;
alert(x);
var txt = "Welcome ";
for (var i = 0; i < x.length; i++) {
txt = txt + x.charAt(i) + "<br />";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
loop??? I didn't understand its very simple try this.
<html>
<body>
<p id="demo"></p><br>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()">
<script>
function myFunction() {
var x = document.getElementById("myList");
var txt = "Welcome " + x.value;
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
OR
var x = document.getElementById("myList").value;
var txt = "Welcome " + x;
You have to take the "myList" id's value and then assign it to innerHTML of tag which could be done as follows :
<html>
<body>
<p id="demo"></p>
<br>
<form>
<input id="myList" type="text">
<input type="button" value="Try it" onclick="myFunction()"/>
</form>
<script>
function myFunction()
{
var txt = "Welcome";
var x = document.getElementById("myList").value;
txt = txt +" "+x;
document.getElementById("demo").innerHTML=txt;
}
</script>
</body>
</html>

Javascript Error Null is not an Object

Im getting a error in the Web Inspector as shown below:
TypeError: 'null' is not an object (evaluating 'myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}')
Here is my Code (HTML):
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<script src="js/script.js" type="text/javascript"></script>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="submit" id="myButton" value="Go" />
</form>
Here is the JS:
var myButton = document.getElementById("myButton");
var myTextfield = document.getElementById("myTextfield");
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}
Any Idea why I am getting the error?
Put the code so it executes after the elements are defined, either with a DOM ready callback or place the source under the elements in the HTML.
document.getElementById() returns null if the element couldn't be found. Property assignment can only occur on objects. null is not an object (contrary to what typeof says).
Any JS code which executes and deals with DOM elements should execute after the DOM elements have been created. JS code is interpreted from top to down as layed out in the HTML.
So, if there is a tag before the DOM elements, the JS code within script tag will execute as the browser parses the HTML page.
So, in your case, you can put your DOM interacting code inside a function so that only function is defined but not executed.
Then you can add an event listener for document load to execute the function.
That will give you something like:
<script>
function init() {
var myButton = document.getElementById("myButton");
var myTextfield = document.getElementById("myTextfield");
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
}
}
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}
document.addEventListener('readystatechange', function() {
if (document.readyState === "complete") {
init();
}
});
</script>
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="button" id="myButton" value="Go" />
</form>
Fiddle at - http://jsfiddle.net/poonia/qQMEg/4/
Try loading your javascript after.
Try this:
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="submit" id="myButton" value="Go" />
</form>
<script src="js/script.js" type="text/javascript"></script>
I think the error because the elements are undefined ,so you need to add window.onload event which this event will defined your elements when the window is loaded.
window.addEventListener('load',Loaded,false);
function Loaded(){
var myButton = document.getElementById("myButton");
var myTextfield = document.getElementById("myTextfield");
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}
}
I agree with alex about making sure the DOM is loaded. I also think that the submit button will trigger a refresh.
This is what I would do
<html>
<head>
<title>webpage</title>
</head>
<script type="text/javascript">
var myButton;
var myTextfield;
function setup() {
myButton = document.getElementById("myButton");
myTextfield = document.getElementById("myTextfield");
myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);
return false;
}
}
function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName("h2")[0].innerHTML = greeting;
}
</script>
<body onload="setup()">
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>
<form>
<input type="text" id="myTextfield" placeholder="Type your name" />
<input type="button" id="myButton" value="Go" />
</form>
</body>
</html>
have fun!

Categories