is it possible to update html content in a page using Javascript? - javascript

I have a html page with textbox and button.
textbox
button
If I enter some text in textbox and on click on the button, it should update the HTML page like this:
text entered with h1 tag
textbox
button
Is this possible with Javascript?

Yes, it is possible. Tempted to leave it at that, but...
window.onload = function() {
var h1 = document.createElement("H1");
var txt = document.getElementById('mytext');
document.body.insertBefore(h1, txt);
document.getElementById('mybutton').addEventListener('click', function() {
h1.innerHTML = txt.value;
});
};
<input type="text" id="mytext" value="" />
<input type="button" id="mybutton" value="Send it" />

$('textarea').keyup(function () {
var mystring = $(this).val();
$('p').text(mystring);
});
Sure, with javascript.

Related

click to copy element's html code

So what i'm trying to do basically is to create my own Bootstrap Cheat Sheet that would allow me to automatically copy and element's html code to the clipboard when I click on it or on a certain button.
A little bit like this site is doing : https://hackerthemes.com/bootstrap-cheatsheet/
I know how to copy text but how to get access to the actual html code and copy it that i don't know how.
This is the code 'm using to copy text :
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("Copy");
alert("Copied the text: " + copyText.value);
}
</script>
would really appreciate some help ^^
To get the text of the outerHtml copied, you need to take that and put it into a textbox so that you can select it, then copy it. It's a pretty hacky way to do this, but if you want to do it like hackerthemes, you can put the HTML into a disabled, selectable textbox that is styled nicely with CSS.
<html>
<head>
<script>
function myFunction() {
// get the OUTER html of the element you want to copy
var text = document.getElementById('myInput').outerHTML;
// put that outerHTML into another textbox for copying
var tempTextbox = document.getElementById('copyingText');
tempTextbox.value = text;
tempTextbox.focus();
tempTextbox.select();
document.execCommand("Copy");
}
</script>
</head>
<body>
<input type="text" id="copyingText" />
<input type="text" value="Copy Test" id="myInput" />
<button onclick="myFunction()">Copy text</button>
</body>
</html>
To access and change the words inside a div, or any element really, it is .innerHTML of an element.
function myFunction() {
var button = document.getElementById("Button");
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("Copy");
alert("Copied the text: " + copyText.value);
button.innerHTML = "Copied!";
}
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()" id="Button">Copy text</button>
This is just a quick example to show that .innerHTML can change the text on the inside of the button. If you are more of a jQuery person (Which I am), you could use the function .appendTo(), which is just the same thing, but in jQuery. I wouldn't recommend that to you since there is already a built-in function for doing that in js.
Now to copy whatever the code is,
function myFunction() {
var text = document.getElementById("myInput");
var copyText = document.getElementById('myInput').outerHTML;
var textbox = document.getElementById('html');
textbox.value = copyText;
var button = document.getElementById("Button");
textbox.select();
document.execCommand("Copy");
alert("Copied the text: " + text.value + " HTML code!");
button.innerHTML = "Copied!";
}
#html {
visibility: hidden;
}
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()" id="Button">Copy text</button>
<input type="text" value="" id="html">
Now this second code takes the source code and copies that.
You can't Perform a Copy/Cut commands, on the document's elements.
document.execCommand("Copy"); only gets you an input value that you called select(); on, so i suggest you do the following :
function myFunction() {
var copyinput = document.createElement('input');
copyinput.value = document.getElementById("myInput").outerHTML;
copyinput.select();
document.execCommand("Copy");
alert("Copied the text: " + copyinput.value);
}
<input type="text" id="myInput">
<button onclick="myFunction()">Copy Code</button>
Use outerHTML to get the html as string.
function myFunction() {
//getting the html
var copyText = document.getElementById("myInput").outerHTML;
copyText.select();
document.execCommand("Copy");
//remove value
alert("Copied the text: " + copyText);
}

Input text value into a div?

Say I have this text box:
<input type="text" id="myText" placeholder="Enter Name Here">
Upon pressing a button, I would like to send the value entered into this div:
<div id="text2"></div>
I'm not entirely sure how to do this. Do I create a function and call it to the div? How would I do that?
Could someone clear this up for me? Thanks.
Add an onclick to your button:
<input type="button" id="somebutton" onclick="addText()">
Then write the javascript:
function addText()
{
document.getElementById('text2').innerHTML = document.getElementById('myText').value;
}
Solution using onclick event:
<input type="text" id="myText" placeholder="Enter Name Here">
<div id="text2"></div>
<button id="copyName" onclick="document.querySelector('#text2').innerHTML = document.querySelector('#myText').value" value="Copy Name"></button>
JSFiddle: http://jsfiddle.net/3kjqfh6x/1/
You can manipulate the content inside the div from javascript code. Your button should trigger a function (using the onclick event), which would access the specific div within the DOM (using the getElementById function) and change its contents.
Basically, you'd want to do the following:
<!DOCTYPE html>
<html>
<script>
function changeContent() {
document.getElementById("myDiv").innerHTML = "Hi there!";
}
</script>
<body>
<div id="myDiv"></div>
<button type="button" onclick="changeContent()">click me</button>
</body>
</html>
Mark D,
You need to include javascript to handle the button click, and in the function that the button calls, you should send the value into the div. You can call $("#myText").val() to get the text of the text box, and $("#txtDiv").text(txtToAppend) to append it to the div. Please look at the following code snippet for an example.
function submitTxt() {
$("#txtDiv").text($("#myText").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myText" placeholder="Enter Name Here">
<button onclick = "submitTxt()"> Submit </button>
<div id="txtDiv"> </div>
HTML could be:
<input type='text' id='myText' placeholder='Enter Name Here' />
<input type='button' id='btn' value='click here' />
<div id='text2'></div>
JavaScript should be external:
//<![CDATA[
var pre = onload; // previous onload? - window can only have one onload property using this style of Event delegation
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
var text2 = E('text2'); // example of Element stored in variable
E('btn').onclick = function(){
text2.innerHTML = E('myText').value;
}
}
//]]>
I would recommend using a library like jQuery to do this. It would simplify the event handling and dom manipulation. None the less, I will include vanilla JS and jQuery examples.
Assuming the HTML in the body looks like this:
<form>
<input id="myText" type="text" placeholder="Enter Name Here">
<br>
<input type="submit" id="myButton">
</form>
<div id="text2"></div>
The Vanilla JS example:
//Get reference to button
var myButton = document.getElementById('myButton');
//listen for click event and handle click with callback
myButton.addEventListener('click', function(e){
e.preventDefault(); //stop page request
//grab div and input reference
var myText = document.getElementById("myText");
var myDiv = document.getElementById("text2");
//set div with input text
myDiv.innerHTML = myText.value;
});
When possible avoid using inline onclick property, this can make your code more manageable in the long run.
This is the jQuery Version:
//Handles button click
$('#myButton').click(function(e){
e.preventDefault(); //stop page request
var myText = $('#myText').val(); //gets input value
$('#text2').html(myText); //sets div to input value
});
The jQuery example assumes that you have/are adding the library in a script tag.

Make hidden input field visible HTML Javascript

Html input field is inside anchor tag like so ..
<a id="brand" onclick="myFunction()" class="brand" ><input id="mytext" onclick="myFunction()" type="hidden" value="Anchor Title">Anchor Title</a>
Javascript uses set attribute
<script>
function myFunction() {
document.getElementById("brand").innerHTML = "";
document.getElementById("mytext").setAttribute("type", "text");
var elem = document.getElementById("mytext");
elem.value = "Edit Title";
document.getElementById("brand").innerHTML = elem.value;
}
</script>
ACTUAL RESULTS
Anchor title is cleared on click
But, the input field is still hidden
Wanting To Achieve
Anchor title cleared on click
Input text field appears
User inputs text
Text from input becomes anchor title
Input field becomes hidden again
I think you should remove the line:
document.getElementById("brand").innerHTML = "";
(I don't know but maybe you delete the input element by that.)
Notice that when you do document.getElementById("brand").innerHTML = ""; you are deleting all things there are between <a id="brand"> and </a>, in this case the <input> line.
My solution:
<html>
<script>
function myFunction1() {
var elem1 = document.getElementById("mytext1")
elem1.setAttribute("type", "text");
elem1.value="Edit Title";
document.getElementById("mytext2").innerHTML = "";
}
function myFunction2() {
var elem1 = document.getElementById("mytext1")
elem1.setAttribute("type", "hidden");
document.getElementById("mytext2").innerHTML = elem1.value;
}
</script>
<a id="brand" onclick="myFunction1()" class="brand" >
<input id="mytext1" onchange="myFunction2()" type="hidden" value="Anchor Title">
<span id="mytext2">Anchor Title</span>
</a>
</html>

Add a string of text into an input field when user clicks a button

Basically just trying to add text to an input field that already contains a value.. the trigger being a button..
Before we click button, form field would look like.. (user inputted some data)
[This is some text]
(Button)
After clicking button, field would look like.. (we add after clicking to the current value)
[This is some text after clicking]
(Button)
Trying to accomplish using javascript only..
Example for you to work from
HTML:
<input type="text" value="This is some text" id="text" style="width: 150px;" />
<br />
<input type="button" value="Click Me" id="button" />​
jQuery:
<script type="text/javascript">
$(function () {
$('#button').on('click', function () {
var text = $('#text');
text.val(text.val() + ' after clicking');
});
});
<script>
Javascript
<script type="text/javascript">
document.getElementById("button").addEventListener('click', function () {
var text = document.getElementById('text');
text.value += ' after clicking';
});
</script>
Working jQuery example: http://jsfiddle.net/geMtZ/
​
this will do it with just javascript - you can also put the function in a .js file and call it with onclick
//button
<div onclick="
document.forms['name_of_the_form']['name_of_the_input'].value += 'text you want to add to it'"
>button</div>
Here it is:
http://jsfiddle.net/tQyvp/
Here's the code if you don't like going to jsfiddle:
html
<input id="myinputfield" value="This is some text" type="button">​
Javascript:
$('body').on('click', '#myinputfield', function(){
var textField = $('#myinputfield');
textField.val(textField.val()+' after clicking')
});​
HTML
<form>
<input id="myinputfield" value="This is some text">
<br>
<button onclick="text()">Click me!</button>​
</form>
Javascript
const myinputfield = document.querySelector("#myinputfield");
function text() {
myinputfield.value = myinputfield.value + "after clicking";
}
I know this question is almost ten years old but this answer does not use jquery so it may be useful to others.
https://codepen.io/frog22222/full/oNdPdVB

insert text to selected Textbox use Javascript

I have 2 textBox and 1 button!
I want to insert text to one of these textboxs. When I click to textbox_1 and click button, mytext will appear at textbox_1. When I click to textbox_2 and click button, mytext will appear at textbox_2.
How can I do this by using JavaScript?
Please help me! I'm new on JavaScript!
put id's of the two textboxes as textbox_1 and textbox_2 and put onclick='onCLickButton();' on the <button> tag
and write the following code in the script
var text_to_be_inserted = "sample";
function onCLickButton(){
document.getElementById("textbox_1").value='';
document.getElementById("textbox_2").value='';
if(document.getElementById("textbox_1").focused){
document.getElementById("textbox_1").value=text_to_be_inserted;
}
else if(document.getElementById("textbox_2").focused){
document.getElementById("textbox_2").value=text_to_be_inserted;
}
else{
// do nothing
}
}
Edited
Please accept my apologies actually I am used to use these functions as I have my own js file having these functions.
please add onfocus='onFocusInput(this);' in the <input> tags and add the following code in the script
function onFocusInput(object){
document.getElementById("textbox_1").focused=false;
document.getElementById("textbox_2").focused=false;
object.focused = true;
}
<html>
<head>
<script type="text/javascript">
var index = false;
var text = "This text shifts to text box when clicked the button";
function DisplayText(){
if(!index){
document.getElementById("txt1").value = text;
document.getElementById("txt2").value = "";
}
else{
document.getElementById("txt2").value = text;
document.getElementById("txt1").value = "";
}
index = index ? false : true;
}
</script>
</head>
<body>
<input type="text" id="txt1"/>
<input type="text" id="txt2"/>
<input type="button" value="Change Text" onclick="DisplayText()"/>
</body>
</html>
Take a look at the onFocus() attribute for the INPUT tag - and think about keeping track of what was last given the focus. I'm being a little vague as this sounds a lot like homework.
It isn't the prettiest / most delicate solution, but it works and you can build off it to fulfill your needs.
<script>
var field = 0;
function addText(txt){
if(field === 0) return false;
field.value = txt;
}
</script>
For a form such as
<form>
<input type="text" name="box1" id="box1" onfocus="field=this;" />
<input type="text" name="box2" id="box2" onfocus="field=this;" />
<input type="button" onclick="addText('Hello Thar!');" />
</form>

Categories