Can anyone tell me how do you clone from a span element and append to input value by clicking the span element itself?
Here is the script.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("span#username").click(function() {
$("span#username").clone().appendTo("#test");
});
});
</script>
</head>
<body>
<span id="username"> User </span><br><br>
<input type="text" id="test" value="" />
</body>
</html>
You have to set the value of the input (jQuery.val()) to the text content of the span (jQuery.text()) like this:
// IDs are enough
$("#username").click(function() {
$("#test").val($(this).text()); // this is the span beign clicked
});
No jQuery:
document.getElementById("username").addEventListener("click", function() {
document.getElementById("test").value = this.textContent;
});
Related
I'm trying to change the text in an h2 element with the simplest code but don't get what I'm doing wrong :
html
<h2 id="tries">Number of tries : 0</h2>
javascript
document.getElementById("tries").innerHTML = 'new text';
There is nothing wrong wiht that. You asked JS to replace the innerHTML, and JS done that.
If you want to change only the value after the ":" then here is an example where I placed a span into the the p and I change the innerHTML of this span.
function changeText(value) {
//this is the point
document.getElementById("tries-value").innerHTML = value;
}
const input = document.querySelector("input");
input.addEventListener("change", (e) => changeText(e.target.value));
changeText(input.value)
<h2 id="tries">Number of tries : <span id="tries-value">0</span></h2>
<label for="input-number">Change the input:</label>
<input id="input-number" value="10" type="number" />
I just guess you did that and as you can see, it will fail
<!doctype html>
<html>
<head>
<script>
document.getElementById("tries").innerHTML = 'new text';
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
You can first do DOM Operations if the DOM is actually loaded, so you just listen to the window.load event and it will work
<!doctype html>
<html>
<head>
<script>
window.addEventListener('load', function () {
document.getElementById("tries").innerHTML = 'new text';
});
</script>
</head>
<body>
<h2 id="tries">Number of tries : 0</h2>
</body>
</html>
So I have an input type file and textarea. I want to show the file name in textarea on input type file change. Here I have reached something, but this works only for the first time and when I write some text and want to select another file I don't get that file name in textarea.
<!DOCTYPE html>
<html>
<head>
<title>victory please</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
#list {
width: 500px;
height: 650px;
}
</style>
</head>
<body>
<input type="file" name="img[]" id="file">
<input type="submit" name="submit" id="submit">
<br><br>
<textarea id="list" name="list"></textarea>
<div id="demo"></div>
<script>
$('#file').change(function () {
var value = $('#file').val();
$('#list').append(value);
});
$('#submit').click(function() {
var a = getElementById('list').value;
getElementById('demo') = a;
});
</script>
</body>
</html>
You need to use .value or .innerHtml after write manually in textarea.
For example change this:
$('#list').append(value);
into:
$('#list').val($('#list').val()+value);
should works.
So I am trying to, when the button a is clicked, add the letter to the textfield. However, I cant seem to figure out why it isn't working. I got the code for it from here on stack exchange. Any help is as always appreciated.
<html>
<head>
<title>Test</title>
<style>
tab1 { padding-left: 8em; }
tab2 { padding-left: 12em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</head>
<body style="background-color:powderblue;">
<tab2><input id="bar a" style="height:20px;width:120px" type="button" value="a" onlick=buttonPress('a')/><br><br>
<tab1><input id ="stringInput" type="text" value=""/><br>
<script language="javascript" type="text/javascript">
var added;
function buttonPress(added)
{
document.getElementById("bar a").addEventListener('click', function () {
var text = document.getElementById('stringInput');
text.text = (text.text + added);
});
}
</script>
</body>
</html>
You don't need to attach event as you are already calling function onclick.
Aslo you need value property of textbox not text
function buttonPress(added)
{
var text = document.getElementById('stringInput');
text.value= (text.value + added);
}
Also your html for button in invalid.It should be
<input id="bar a" style="height:20px;width:120px" type="button" value="a" onclick="buttonPress('a')" />
<html>
<head>
<title>Test</title>
<style>
tab1 { padding-left: 8em; }
tab2 { padding-left: 12em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
</head>
<body style="background-color:powderblue;">
<input type="text" value="" id="test1">
<input id ="test2" type="text" value="ram"/><br>
<input type="button" onclick="addInput()"/ value="click">
<span id="responce"></span>
<script>
function addInput()
{
var test1_value= document.getElementById('test1').value;
var test2_value= document.getElementById('test2').value;
document.getElementById('test2').value=''+test2_value+''+test1_value;
}
</script>
</body>
</html>
There are few issues in your code. Not sure if it is a typo in your code.
For example onlick=buttonPress('a') . It should be onclick and the handler function should be quotes. Refer to the below html.
There is also no need of adding addEventListener inside function. You have already added the listener in the html code. If you add the listener inside the function, then on first click it will again try to add the the event.
Refer to the below js. Hope this will be useful
var added = " New Text";
function buttonPress(added) {
var text = document.getElementById('stringInput');
text.value = (text.value + added);
}
HTML
<input id="bar" style="height:20px;width:120px" type="button" value="a" onclick='buttonPress("a")' />
DEMO
your onclick is mispelled as onlick. This will be read as a custom attribute.
put the buttonPress('a') inside "". It will become onclick="buttonPress('a')". It prompts an error when it's not inside "".
since you are using an input for the component with id "stringInput", text property does not work so you have to use the value property instead.
The following code does not work
<!DOCTYPE html>
<html>
<body>
<input type="text" id="searchTxt"/>
<input type="button" id="run"/>
<script>
$(document).ready(function() {
$("#run").click(function(){
var input = document.getElementById("searchTxt");
alert(input);
});
});
</script>
</body>
</html>
How can I get and print the value in the text box ?
You have to include the jQuery JS file inside your <head> tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
.value on the element return by the getElementById function
http://jsbin.com/OYodAvo/1/edit
Today I was wondering if there's a way to grab a div's class that's already been clicked and mirror the class name to a textbox and set it as the value.
If another div has been clicked, replace it with that one.
Is there anyway to do this in JQuery?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Grab Element's DIV</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<div class="container">
<center>
<p>
Grab DIV Class Onclick: <input type="text" id="divclass" placeholder="show class name here" />
</p>
<div class="wrapper">
<div class="im-red"></div>
<div class="blue-foo"></div>
<div class="green-beans"></div>
</div>
</center>
</div>
</body>
</html>
JavaScript:
$(function() {
$(".wrapper div").click(function() {
});
});
I think you are looking for:
$(function() {
$(".wrapper div").click(function() {
$("#divclass").val($(this).attr('class'));
});
});
Live Demo
I'd suggest:
$('.wrapper div').click(function(){
$('#divclass').val(this.className);
});
JS Fiddle demo.
References:
val().