How can I copy text from input - javascript

I write with translate.
I want the input text to appear in the paragraph, then click the button .
html code:
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>
JS code:
var txt = JSON.parse(demo);
function myFunction() {
var txt = JSON.parse(demo);
function myFunction() {
document.getElementById("test").innerHTML = txt;
}
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>

You need to get the value of the input in the function. There's no need to use JSON.parse.
function myFunction() {
document.getElementById("test").innerHTML = document.getElementById("demo").value;
}
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>

function copyToParagraph() {
var inputValue = document.getElementById('txtInput').value;
var paragraphEle = document.getElementById('par');
paragraphEle.innerHTML = inputValue;
console.log(inputValue);
console.log(paragraphEle);
}
<input type="text" id="txtInput" />
<br/>
<button onclick="copyToParagraph()">Click Me to Copy</button>
<br/><br/><br/>
<p id="par"></p>

You need to make a var input = document.getElementById('input').value; So that you have the value. Then do this:
function myFunction() {
var input = document.getElementById('input').value;
document.getElementById('demo').innerHTML = input;
}

Related

Input text needs a case change when button is clicked. Having trouble creating JS for this

I need to create two input text boxes that when the UpperCase button is clicked the input text is returned all in caps and when the LowerCase button is clicked the input text is returned in lower case. So for example:
Text: SuNsHiNe ToDaY
(upper case button)= SUNSHINE TODAY
(lower case button)= sunshine today
I have pasted the html code below and need help creating the JS code:
<!doctype html>
<html>
<head>
<script src='../p3-case.js'></script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" value="upperCase"/>
<input type="button" id="btn2" value="lowerCase"/>
</form>
</body>
</html>
I think you not need to use any external js just using Jquery
You need to use toLowerCase() and toUpperCase()
$("#btn1").click(function(){
var input = $("#input1");
input.val(input.val().toUpperCase());
});
$("#btn2").click(function(){
var input = $("#input1");
input.val(input.val().toLowerCase());
});
Here is sample of jsbin JSBIN
Here you go:
<!doctype html>
<html>
<head>
<script>
function upper()
{
var uc = document.getElementById('input1').value;
document.getElementById('input1').value = uc.toUpperCase();
}
function lower()
{
var lc = document.getElementById('input1').value;
document.getElementById('input1').value = lc.toLowerCase();
}
</script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" value="upperCase" onclick="upper();">
<input type="button" id="btn2" value="lowerCase" onclick="lower();">
</form>
</body>
</html>
writing from my tablet but i try my best! :)
Pure JavaScript:
Add onclick event to the button:
<input type="button" onclick="toupp()" id="btn1" value="upperCase";">
Then the functions
<script>
var toupp = function(){
var text = document.getElementById("input1").value;
document.getElementById("input1").value = text.value.toUpperCase();
}
and the other function:
var tolow = function(){
var text = document.getElementById("input1").value;
document.getElementById("input1").value = text.toLowerCase();
}
</script>
This code works perfectly for me
<!doctype html>
<html>
<head>
<script >
function toUpper(){
var obj = document.getElementById("input1");
var str = obj.value;
var res = str.toUpperCase();
obj.value = res;
}
function toLower(){
var obj = document.getElementById("input1");
var str = obj.value;
var res = str.toLowerCase();
obj.value = res;
}
</script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" onClick='toUpper()' value="upperCase";">
<input type="button" id="btn2" onClick='toLower()' value="lowerCase">
</form>
</body>
</html>

How to get the textarea value in a div element?

I want the text typed in textarea with id text in the div element typed, how can i?
head
<script>
function field()
{
var txt = document.getElementById("text").value;
if (txt.length > 0){
document.getElementById("typed").value = txt;
}
}
</script>
body
<input type="text" id="text"></input>
<br>
<b> You Typed : <div id="typed"></div> </b>
<br>
<input type="button" value="Submit" onclick="field()">
.value is for input elements. To put something in a DIV, use .innerText:
document.getElementById("typed").innerText = txt;
DEMO with <input>
DEMO with <textarea>
Change the function like the following
function field()
{
var txt = document.getElementById("text").value;
if (txt.length > 0)
{
document.getElementById("typed").innerText= txt;
}
}
you can with this :
<html>
<head>
<script>
function field()
{
var txt = document.getElementById("text").value;
if (txt.length > 0){
document.getElementById("typed").innerText = txt;
console.log(txt);
}
}
</script>
</head>
<body>
<input type="text" id="text"></input>
<br>
<b> You Typed : <div id="typed"></div> </b>
<br>
<input type="button" value="Submit" onclick="field()">
</body>
</html>
document.getElementById("typed").innerHtml = document.getElementById("text").value;

javascript that copies a var to a textbox

I got this code:
#using (Html.BeginForm())
{
<h3 id="js" class="text-blue title-article editable">#Model.Title</h3>
<input type="text" id="testinput" name="testinput" />
<input type="submit" value="submit" onclick="changeLink()">
}
<script>
function changeLink()
{
var str =document.getElementById('js').innerHTML;
alert(str);
}
</script>
When I click the submit-button, the function gets the .innerhtml from the id="js".
I would like the var str to get copied into the textbox with the id="testinput".
You can get value from js element and equal to the testinput
<script>
function changeLink()
{
document.getElementById('js').innerHTML = document.getElementById('testinput').value
}
</script>
Try this..
<script>
function changeLink()
{
document.getElementById('testinput').value=str ;
}
</script>

jquery form not printing input

Found a nice website for an alternative to using /forms in share point. My code below though does not print my input to the screen. Any Suggestions.
<script type="text/javascript">
function printvalues()
{
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
</script>
<div id="divId">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="printvalues();">
Generate!
</button>
<div id="divId">
</div>
There's two issues with your code.
First, you're missing a closing </div> tag; and you have two <div> elements with the same id property! I think you should remove the first div's id property.
Second, your <input /> is missing the id property, therefore it's not automatically defined by inputobj1.
Try this markup:
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += document.getElementById("inputobj1").value;
}
</script>
<div>
username: <input id="inputobj1" name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="printvalues();">Generate!</button>
<div id="divId"></div>
</div>
Here's a working jsFiddle.
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
</script>
<div id="divId2">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="javascript:printvalues();">
Generate!
</button>
<div id="divId"></div>
</div>
or
<div id="divId2">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button">
Generate!
</button>
<div id="divId"></div>
</div>
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
$('#idButton').click(function(){
printvalues()
})
</script>
You had 2 divId's as well, i made an assumption on witch on to use
this doesnst work because you have two div with id="idButton" and your markup is not closed
this may also work as you tagged jquery
function printvalues() {
var value = $('input[name="inputobj1"]').val();
var $div = $('<div>',{text:value});
$('#divId').append($div);
}
or using the divId div
function printvalues() {
var value = $('input[name="inputobj1"]').val();
$('#divId').text(value);
}

Empty or reset entire array with button

This is my script might be easier to explain if yas can see it, im tring to reset the array with a button
<body>
<script type="text/javascript">
var number = [];
function myFunction()
{
var x = document.getElementById("box");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add to list"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:scroll">
</div>
<form>
<input type=button onclick="number.splice(0)" value="Reset" />
</form>
</body>
</html>
Yes. Call it from a function.
EDIT: splice has problems with IE. Use array.length = 0 instead
<body>
<script type="text/javascript">
var number = [];
function myFunction() {
var x = document.getElementById("box");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<br/>');
}
function myReset() {
//number.splice(0);
number.length = 0;
var x = document.getElementById("box");
x.innerHTML = "";
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add to list"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:scroll">
</div>
<form>
<input type=button onclick="myReset()" value="Reset" />
</form>
</body>
Despite being ugly, onclick="number.splice(0)" works: http://jsfiddle.net/39KZ9/20/

Categories

Resources