I'm trying to get an input from a text input box to transform a paragraph into what's in the input box. Note that this is not a web page just code run in a Browser.
Here's what I've got so far:
<!DOCTYPE html>
<html>
<form><center>
First name:<br>
<input type="text" name="Firstname" id="JohnnyFunc"></form>
<button type="button" onclick="myFunction">Submit</button>
<script>
function myFunction()
{
document.getElementById("JhonnyOutput"). innerHTML="JohnnyFunc"
}
</script>
<center><p>Hello</p><p id="JhonnyOutput">Johhny!</p></center>
</html>
The onclick attribute should include the parentheses after the function name: onclick="myFunction()"
<form>
<center>First name:<br><input type="text" name="Firstname" id="JohnnyFunc"></center>
</form>
<center><button type="button" onclick="myFunction()">Submit</button></center>
<script>
function myFunction()
{
document.getElementById("JhonnyOutput"). innerHTML="JohnnyFunc"
}
</script>
<center><p>Hello</p><p id="JhonnyOutput">Johhny!</p></center>
You were also missing a closing tag for your first <center> element
Also, to change the text to what's in the text box, you need to get the text from the input element:
function myFunction() {
var newText = document.getElementById("JohnnyFunc").value
document.getElementById("JhonnyOutput").innerHTML = newText
}
Related
Based on the similar question found at
Input Box That Changes Page Title:
<!DOCTYPE html>
<html>
<title>Old title</title>
<body>
<h1 id="h1"></h1>
<input type="text" name="name" id="iText" value="start typeing" />
<form onsubmit="myFunction()">
Enter name: <input id ="iText" type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('iText').onkeyup = myFunction;
function myFunction() {
window.parent.document.title = document.getElementById("iText").value;
document.getElementById("h1").innerHTML = document.title;
}
</script>
</body>
</html>
This is working perfectly with the onkeyup event. However, I don't want the flicking but only change page title once when people click the submit. But my code is not working as expected.
Basically what i wanna do is when user writes something to input and submits it, the page title will be changed to the input.
I want to do this by typing my name in the input, then pressing the button and an h1 tag will appear below the input: Hello (my name)! I don't know how to solve this.
Here is my html and jQuery code:
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<button id="button" type="button">Click</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#button').click(function () {
$('body').append('<h1></h1>')
$("h1").append('Hello')//+ my name
})
</script>
You need to get the value from the #Name input. Unless you have a specific reason for doing this in multiple steps, you can append the html as a whole like this:
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<button id="button" type="button">Click</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#button').click(function () {
if ($('#Name').val()) { //make sure the user entered something
$('body').append(`<h1>Hello ${$('#Name').val()}!</h1>`);
}
});
</script>
The backticks `` are a template literal, they allow you to build strings without a bunch of concatenation.
`Hello ${my_name}!` vs 'Hello ' + my_name + '!'
To get the value of the input field you can use:
$('input#Name').val();
Instead of appending it to the h1 element, you can simply set its text to the wanted value, in your case: .text('hello '+getName).
In case a visitor makes a mistake you only need to modify the inner text of the h1 instead of appending it to the body again.
$('h1').text();
$('#button').click(function () {
let getName = $('input#Name').val();
if(!$('h1').length){
$('body').append('<h1 class="greeting-title"></h1>');
}
$("h1").text('Hello '+getName)//+ my name
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<button id="button" type="button">Click</button>
</form>
If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE
create two text boxes.User will give from keyboard in the first text box and in the second text box will take the variable from the first text box and will make the characters caps locks.Example :i give e inside the first text box on the second box will be E.
<html>
<head>
<title>exc1</title>
<script>
function create() {
var x = document.getElementById("textbox").value;
}
function takevariable(x){
}
</script>
</head>
<body>
<input type="text" id="textbox" onkeydown="create()">
<input type="text" id="textbox" onkeypress="takevariable()">
</body>
</html>
Here you are giving same id to the both text element, ids should be unique so I am renaming them with textboxfrom and textboxto. Second, here you should also need to listen keyup event aswell, otherwise you wont't get last character in the second box. Because for single character entry, browser enters character just when it fires keyup event.
<html>
<head>
<title>exc1</title>
<script>
function create() {
var x = document.getElementById("textboxfrom").value;
}
function takevariable(x){
document.getElementById("textboxto").value = document.getElementById("textboxfrom").value.toUpperCase();
}
</script>
</head>
<body>
<input type="text" id="textboxfrom" onkeydown="create()" onkeypress="takevariable()" onkeyup="takevariable()">
<input type="text" id="textboxto" >
</body>
</html>
Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>