I am a beginner html and js programmer and I am trying to display inner HTML output into another TextBox.The code I am using does not give the output in the text box.Can anyone tell me what is wrong with this code?
this is my code
<script>
function my()
{
var a=document.getElementById("text").value;
document.getElementById("demo").innerHTML=a;
}
</script>
<input type="text" id="text" onKeyUp="my()"><br><br>
<span id="demo">
<input type="text" id="demo">
</span>
Any Help is Appreciated...Thanks
You have the same id attribute for both span and your input i.e "demo". Change the span id and try it
The below works:
<script>
function my()
{
var a=document.getElementById("text").value;
document.getElementById("demo").value=a;
}
</script>
<input type="text" id="text" onKeyUp="my()"><br><br>
<span id="demo_span">
<input type="text" id="demo">
</span>
Related
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>
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
}
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>
Adding the insertion of input type text into the div title on the same screen. Attempted broken function to they turn the input into a variable and use it to fill in the div.
<body>
<div class="form">
Form <br><br>
<form name="input" action="javascript:alert(titleValue);">
Title: <input type="text" name="title" class="titleInsert">
<input type="submit" value="Submit">
</form>
</div>
<div class="offer_display">
<div class="title" id= title></div>
</div>
</body>
<script>
var titleValue="";
$('#titleInsert').on("change", function () {
titleValue=$(this).val();
$("#title h3").text("titleValue");
});
</script>
</html>
Another problem with you code is, that you have to use "input" event and not "change".
See working code on fiddle: http://jsfiddle.net/z037qv3n/
<body>
Form <br><br>
<form name="input" action="javascript:alert(titleValue);">
Title: <input type="text" name="title" id="titleInsert">
<input type="submit" value="Submit">
</form>
<div class="title" id="title"></div>
</body>
<script>
var titleValue="";
$('#titleInsert').on("input", function () {
titleValue=$(this).val();
$("#title").text(titleValue);
});
</script>
</html>
Change your code for $('div.title').html(titleValue);
Live Demo : JSFIDDLE
You have to include jQuery library in your head section like this
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
There are lot of mistakes in your code please see below:
First mistake you should put your jQuery inside ready function.
Second mistake there is no such id #titleInsert it is a class so you have to do .titleInsert
Third mistake there is no tag h3 in #title
Fourth mistake you should use .keyup event instead .change event
Replace your jQuery code with following :
<script type="text/javascript">
$(document).ready(function(){
var titleValue="";
$('.titleInsert').on("keyup", function () {
titleValue=$(this).val();
$("#title").text("titleValue");
});
});
</script>
I need to change the value displayed in a form. For example:
<span id="copy" onClick="addValue()">**Text1**</span>
<span id="copy" onClick="addValue()">Text2</span>
Based from what I click, I want to move it to the input value like this:
<input id="paste" class="text" type="input" name="select" value="**Text1**"/>
Function
<script language="javascript" type="text/javascript">
<!--Hide Javascript
function addValue(){
document.getElementById('paste').value = this.innerText;
}
--> </script>
When I click on Text1 in value fild I get "undefined" instead of "Text1" ...
Give this a go.
You need to pass the element into your function so you can access it's properties to assign them to your form input.
HTML:
<form name="myForm">
<span onclick="copyText(this)" >Text1</span>, <span onclick="copyText(this)" >Text2</span>
<br>
<input name="myField"></input>
</form>
Javascript:
function copyText(element) {
document.myForm.myField.value = element.innerHTML;
}
I'd use:
function addValue(el) {
document.getElementById('paste').value = el.innerText || el.textContent || el.outerText;
}
And set the HTML tag like so:
<span id="copy" onClick="addValue(this)">**Text1**</span>
document.myForm.myField.value = "I'm a different value now!";
Is this what you're looking for?
Form and input should have a "name" property, like:
<form name="myForm">
<input name="myField" />
in the case above.