I am having a problem here about copying a text that displays from div (the display comes from jquery) to another div (using javascript).
Here is my code:
<body onload="copyDiv();">
<div id="first_div"></div>
<div id="second_div"></div>
</body>
<script>
// this function provides text for first_div
$(document).ready(function() {
$("#first_div").html('Testing');
});
// this function copies the text that comes from first_div to second_div
function copyDiv() {
var firstDivContent = document.getElementById('first_div');
var secondDivContent = document.getElementById('second_div');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
</script>
My expected output is, the jquery will provide the text for the first_div, and the javascript function will copy the text from first_div into the second_div. Thanks in advance
Both tasks should be on load and in order:
$( document ).ready(function(){
$("#first_div").html('Testing');
$("#second_div").html($("#first_div").html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<div id="first_div"></div>
<div id="second_div"></div>
</body>
By pure JavaScript as per your question content.
function copyDiv() {
var firstDivContent = document.getElementById('first_div');
var secondDivContent = document.getElementById('second_div');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
<body onload="copyDiv();">
<div id="first_div">Testing</div>
<div id="second_div"></div>
</body>
Related
I have created the input fields but when i click the first two ,it does well until when i request the third which comes between the first two and also other also comes between.can some help me please.
here is my javascript code:
<script type="text/javascript">
$(document).ready(function() {
it to after "after-add-more" div class.
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
</script>
$(document).ready(function() {
$(".add-more").on('click', function(){
var html = $(".copy-fields").clone();
$(".after-add-more").after(html[0]);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class = "add-more">ADD</button>
<div class = "after-add-more"></div>
<div class = "copy-fields"><input type = "text" /></div>
</div>
Because you are trying to copy the html content of class .copy-fields, Use clone() instead html() and then use html[0] for insert after as following:
$(document).ready(function() {
$(".add-more").click(function(){
var html = $(".copy-fields").clone();
$(".after-add-more").after(html[0]);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
By using similar id's i want to copy to clipboard method without onclick of button.
Is it possible to do this with only id/class?
if possible can any one give me the solution for this method?
i almost tried couple of ways to do this but it doesn't works.
<html>
<script src="jquery-1.8.3.min.js"></script>
<head>
<style>
#tooltip{display: none;position: absolute;cursor: pointer;top:50px;border: solid 1px #eee;background-color:black;padding: 10px;z-index: 1000;color:white;}
</style>
</head>
<span id="mytext">This is Example1</span>
<span id="mytext">This is Example2</span>
<input id="copy_btn" type="button" value="copy">
<div id="tooltip">copied.</div>
<script>
var copyBtn = document.querySelector('#copy_btn');
copyBtn.addEventListener('click', function () {
var urlField = document.querySelector('#mytext');
var range = document.createRange();
range.selectNode(urlField);
window.getSelection().addRange(range);
document.execCommand('copy');
}, false);
</script>
<script>
$(document).ready(function() {
$("#copy_btn").click(function(evt) {
evt.preventDefault();
$("#tooltip").show();
$("#tooltip").hide(3000);
});
});
</script>
You can just do like this. Change from id to class for mytext;
var myTextElements = $(".mytext");
var myTextContents = [];
myTextElements.forEach(function(ele,ind){myTextContents.push($(ele).text();)});
I have looked for duplicate questions, however many refer to adding data to XML
please forgive me if I have missed something here but I need some help
so far I have this:
html page
<!DOCTYPE html>
<html>
<head>
<title>Template</title>
<script type="text/javascript" src="script/controlpanelAdmin.js"></script>
<script type="text/javascript" src="script/controlpanelModerator.js"></script>
<script type="text/javascript" src="script/jquery-1.12.0.js"></script>
<link rel="stylesheet" href="script/css.css" />
</head>
<body>
<fieldset id="control_panel">
<legend>Control Panel</legend>
</fieldset>
<p id="content"> Content </p>
</body>
</html>
controlpanelAdmin.js
window.onload = function() {
var controlpanel = document.getElementById("control_panel");
var para = document.createElement("p");
var att = document.createAttribute("admin");
var br = document.createElement("br");
var txt = document.createTextNode("Admin Control Panel");
controlpanel.appendChild(para);
para.setAttribute("id", att);
para.appendChild(txt);
para.appendChild(br);
}
controlpanelModerator.js
window.onload = function() {
var controlpanel = document.getElementById("control_panel");
var para = document.createElement("p");
var att = document.createAttribute("mod");
var br = document.createElement("br");
var txt = document.createTextNode("Moderator Control Panel");
controlpanel.appendChild(para);
para.setAttribute("id", att);
para.appendChild(txt);
para.appendChild(br);
}
When the page loads, 'Admin Control Panel' is written into the fieldset tag
but is then replaced by: 'Moderator Control Panel'
I cannot for the life of me think how to append both lines (and maybe other data as well) into one element
When the page loads, 'Admin Control Panel' is written into the fieldset tag but is then replaced by: 'Moderator Control Panel'
That can't happen. Admin Control Panel should never appear in the page.
script/controlpanelAdmin.js loads. It causes a value to be assigned to window.onload.
script/controlpanelModerator.js loads. It causes that value to be overwritten with a new one.
The page finishes loading
The load event fires
The function defined in script/controlpanelModerator.js is called
Don't assign values to window.onload. Use addEventListener instead.
addEventListener("load", function () { ... });
You've got two onload functions competing. Can you merge them into one function?
I have a very basic input/output structure in HTML:
<textarea id="input" onkeyup="sendCode()">
Hello World!
</textarea>
<div id="output"></div>
And I have JS function that should pass everything from input to output:
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.innerHTML;
}
The sendCode() function works when I call it manually, but it seems that onkeyup event not firing in this textarea.
Here is jsfiddle: http://jsfiddle.net/mudroljub/y5a2n8ab/
Any help?
UPDATE: jsfiddle is updated and working now.
Use value since it's not a content text but a value property
var input = document.getElementById("input");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = input.value;
}
And a working demo here
I would first like to point out that this will not run because the code runs before the HTML exists, so first off, put these lines inside a function:
window.onload= function anyname() {
var input = document.getElementById("input");
var output = document.getElementById("output");
}
Secondly, try using either:
editor.onkeyup = "sendCode()"
in your script area or at the top of the new function i created:
editor.addEventListener(keyup,sendCode,false)
Basically when a key goes up in that area it calls the sendCode() function. The false is if you don't want to use capture which I think is default anyway but just to be safe.
Basically java script is not that dynamic.So a better option is to
use jQuery.
[Note:- "jquery-2.2.2.min.js" given in src, in script tag,
is Jquery Library file codes can be copied from following link :http://code.jquery.com/jquery-2.2.2.min.js]
Just copy the contents from above link,into a textfile , save it by the name "jquery-2.2.2.min.js"
or any other name as you wish.The src of script should contain the same.
The "jquery-2.2.2.min.js" should be in the same directory where
you have the html file. Otherwise full path to be mentioned.
Here is the answer to your question.
<html>
<head>
<title>Dynamic TextArea</title>
<script type="text/javascript" src="jquery-2.2.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("textarea").keyup(function(){
sendCode();
});
});
function sendCode(){
document.getElementById("output").innerHTML =
document.getElementById("input").value;
}
</script>
</head>
<body>
<form>
<textarea id="input">
Hello World!
</textarea>
</form>
<span id="output"></span>
</body>
</html>
If you have any doubts please ask.
I am sure once you learn to use jQuery you would forget javascript.
Where do you define the sendCode() function? It might not exist at the point where you create your text area.
This snippet should work:
<textarea id="editor">
Hello World!
</textarea>
<div id="output"></div>
<script type="text/javascript">
var editor = document.getElementById("editor");
var output = document.getElementById("output");
function sendCode(){
output.innerHTML = editor.value;
}
editor.addEventListener('keyup',sendCode);
</script>
An extremely simple question but I am noob. I have been learning javascript and jquery for a while on jsfiddle, there everything works fine, building cool quizzes and all, but when I tried to actually create a directory, reference the jquery library and my javascript file, nothing works, even the below code, when saved as an HTML file doesn't work. I just paste it into notepad and save it as html, when I open it with it doesn'T work.
<html>
<head>
<title>webpage</title>
<script type="text/javascript">
window.onload = function() {
var myDiv = document.getElementById('#div');
myDiv.appendChild(document.createTextNode("Hi my name is Mehmetcan"));
}
</script>
</head>
<body>
<div id="myDiv"> </div>
</body>
</html>
Use this as starting point:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<title>webpage</title>
<script type="text/javascript">
$(document).ready(function () {
var myDiv = document.getElementById('myDiv');
myDiv.appendChild(document.createTextNode("Hi my name is Mehmetcan"));
});
</script>
</head>
<body>
<div id="myDiv"> </div>
</body>
Another approach that doesn't rely on JQuery but on pure, vanilla javascript.
<html>
<head>
<title>webpage</title>
<script type="text/javascript">
document.body.onload = loadSite;
function loadSite() {
var newDiv = document.createElement("span");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent);
myDiv.appendChild(newDiv);
}
</script>
</head>
<body>
<div id="myDiv"> </div>
</body>
</html>
You can find the full javascript sample as well as more information here, on the document.createElement MDN pages.
document.body.onload = addElement;
var my_div = null;
var newDiv = null;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hi there and greetings!");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}