Creating a div element inside a div element in javascript - javascript

I'm trying a very basic example of creating a div inside an already existing div.
It doesn't seem to be working when I use:
document.getElementbyId('lc').appendChild(element)
but works fine when I do this:
document.body.appendChild(element)
Do I need to add windows.onload function? Though it doesn't work even then!
HTML code:
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc">
</div>
</body>
JS code:
function test()
{
var element = document.createElement("div");
element.appendChild(document.createTextNode('The man who mistook his wife for a hat'));
document.getElementbyId('lc').appendChild(element);
//document.body.appendChild(element);
}

Your code works well you just mistyped this line of code:
document.getElementbyId('lc').appendChild(element);
change it with this: (The "B" should be capitalized.)
document.getElementById('lc').appendChild(element);
HERE IS MY EXAMPLE:
<html>
<head>
<script>
function test() {
var element = document.createElement("div");
element.appendChild(document.createTextNode('The man who mistook his wife for a hat'));
document.getElementById('lc').appendChild(element);
}
</script>
</head>
<body>
<input id="filter" type="text" placeholder="Enter your filter text here.." onkeyup = "test()" />
<div id="lc" style="background: blue; height: 150px; width: 150px;
}" onclick="test();">
</div>
</body>
</html>

'b' should be in capital letter in document.getElementById modified code jsfiddle
function test()
{
var element = document.createElement("div");
element.appendChild(document.createTextNode('The man who mistook his wife for a hat'));
document.getElementById('lc').appendChild(element);
//document.body.appendChild(element);
}

Yes, you either need to do this onload or in a <script> tag after the closing </body> tag, when the lc element is already found in the document's DOM tree.

Related

Text input and output it on page

I was wondering if I can create a text input where users can type some text and then immediately display them on page, same as twitter. I know about alert window or prompt window but I need something different, a text input on website.
Hope it can be done in JavaScript.
Use .keyup() for the input field then replace the content of the output div.
$(".div-input").keyup(function() {
$(".output").html($(this).val());
});
.output {
margin-top: 20px;
font-size: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="div-input" />
<div class="output">
</div>
If you want to display the input on submit, you could attach a .submit() event on a form tag then use appendTo on the div if you want to insert multiple elements;
$(".form-input").submit(function(e) {
e.preventDefault();
var value = $(".div-input").val();
$("<div class='outputs'>" + value + "</div>").appendTo($(".output"));
});
.output {
margin-top: 20px;
}
.outputs {
padding: 20px;
font-size: 2em;
border: 1px solid black;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-input">
<input class="div-input">
<button type="submit">Submit</button>
</form>
<div class="output"></div>
you can use this to show your text anywhere on page
<input id="input-name" oninput="outputname.value = this.value">
<output id="outputname" name="outputname" for="input-name"></output>
You can test it here
If you add an eventlistener to the input, you can use that to change the text in your output area on the page. Like this:
const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('input', (e) => {
output.innerHTML = input.value;
});
<div id="output"></div>
<input type="text" id="input">
HTML:
<p>Input:</p><input id="input" type="text">
<p>Output:<span id="output"></span></p>
Javascript:
// Function To Select Element
function $(element) {
return document.querySelector(element);
}
// We will get the input when calling this function
function getInput() {
return $('#input').value;
}
// The output will be displayed
function output() {
$('#output').innerHTML = getInput();
}
// This function will start our code
function init() {
output();
}
// On keyup our code will initiate
$('#input').addEventListener('keyup', init);
You can test it here: https://codepen.io/anon/pen/ReyGaO?editors=1111
People are downvoting you because this can be done with very basic JavaScript, and questions like this are very unusual because anyone doing a basic JavaScipt course will probably be able to do this.
Theoretically speaking: you can put an input element and a button on the html page, plus an empty div. You can set an event for the button or even for the input for live updating while typing, and write an event handler function to change the content of the empty div. You can either set its content or add a new child to it, so that the previous content still remains.
Practical example: (The code below is live at https://codepen.io/bradib0y/pen/YJLGrb )
<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new post.</p>
<input id="NewPostField" type="text" value="Some text">
<button onclick="myFunction()">Add new post</button>
<div id="Posts"></div>
<script>
function myFunction() {
var NewPostField = document.getElementById("NewPostField");
var newPost = document.createElement("p");
newPost.innerHTML = NewPostField.value;
var Posts = document.getElementById("Posts");
Posts.appendChild(newPost);
}
</script>
</body>
</html>
you can do it by this
<input id="mainInput" oninput="output.value = this.value">
<output id="output" name="output" for="input-name"></output>
click here to view in jsFiddle

Wanted To make a URL based Audio player, But Javascript is not working

I'm new to JS.
I want to make a URL based Audio player.
It's supposed to work by pasting the mp3 url in the textbox, and then click go to play the mp3. But it doesn't do anything. What is wrong with my code?
<script type="text/javascript">
function audio{
var url = document.getElementById('lol').value;
var innerHTML = "<audio controls><source type='audio/mp3' src="+url+"/></audio>";
document.write(innerHTML);
}
</script>
<div id="lol">
<form>
<input type="text" id="lol"/>
<input type="submit" onclick="audio()" value="go"/>
</form>
</div>
You have two elements with id 'lol', and you may have a function define error in your script.
Try this, may work;)
<script type="text/javascript">
function audio(){
var url = document.getElementById('lol').value;
var innerHTML = "<audio controls><source type='audio/mp3' src="+url+"/></audio>";
document.write(innerHTML);
}
</script>
<div id="lol1">
<form>
<input type="text" id="lol"/>
<input type="submit" onclick="audio()" value="go"/>
</form>
</div>
There was a ton of syntax errors, I suggest you use jsHint on your script.
corrected the double lol ids
removed document.write(innerHTML)
removed the whole attempt at using a string (var innerHTML) that's named like the method (innerHTML). I never use strings to make markup it's too easy to screw up.
There's further details in the comments of the source.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
#url {
width: 47ex;
}
</style>
</head>
<body>
<form>
<p>Enter this url:</p>
<code>http://glpjt.s3.amazonaws.com/so/av/balls.mp3</code>
<br/>
<br/>
<input type="text" id="url" />
<!--Use type="button" instead of "submit"-->
<input type="button" onclick="audio()" value="go" />
</form>
<br/>
<br/>
<!--Have an empty div with an id if you plan to create an element -->
<div id="box"></div>
<script>
function audio() {
var url = document.getElementById('url').value;
var box = document.getElementById('box');
// Use createElement to make the audio and source element.
// Trying to make markup with strings is prone to errors.
var player = document.createElement('audio');
// Set controls on audio player
player.setAttribute('controls', true);
var source = document.createElement('source');
// When creating any element, you have to place them
// into the DOM with appendChild
player.appendChild(source);
box.appendChild(player);
// Assign the value of the input to the src of player.
// Make sure to load() the player after assigning or changing src
player.src = url;
player.load();
}
</script>
</body>
</html>
Your implementation of the function is incorrect. It should be:
function audio() {
var url = document.getElementById('lol').value;
var innerHTML = "<audio controls><source type='audio/mp3' src="+url+"/></audio>";
document.write(innerHTML);
}
In HTML page id should be unique but you have used same id 2 times "lol".
Also your function will throw syntax error since it is not function definition syntax.
Is should be:
function audio(){
}

div content display on a textbox HTML Javascript

I am trying to display the content of one of my div in a textbox ... Can somebody help me out with this? How can I display the content of my div tag in a textbox in HTML?
The following is what I have tried so far:
<script>
var test = document.getElementById("div").innerHtml;
document.getElementById("Key").value = test;
</script>
<div id="div" style="width: 50px" /></div>
<input type="text" id="Key" style="width: 50px" />
Julius, in your code, the text part needs to be a div class and in an external css stylesheet; declare the div class with a border.
Example HTML :
<div class="boxed">
This text is enclosed in a box.
</div>
CSS :
.boxed {
border: 1px solid green ;
}
Another way is to have a div class outside the form code and with css style the div and form
<div id="div">
<form id="form">
<input id="text" type="textbox" />
</form>
</div>
#div {
text-align: center;
}
#text {
width: 200px;
}
Say you have a div:
var myTextBox = $("#myTextBox");
var myText = $(".myDiv").text();
myTextBox.val(myText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv"> blah blah </div>
<input type="text" value="" id="myTextBox" />
Using JQuery, you can do:
var myText = $(".myDiv").text(); // query the DOM for .myDiv selector and get its text
var myTextBox = $("#myTextBox"); // query the DOM and get your textbox
myTextBox.val(myText); // assign value to your textbox
To use jquery, you have to include it at the top of your html page like this:
<script type="text/javascript src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js" ></script>
This will get the content from the div once the page had loaded.
If you have dynamic data: You can put this into a function and have window.onload call that function. If you want the content to update with the dynamic data then you can call the function to update the text box.
window.onload=function(){
//Get the innerHTML of the div tag
var a=document.getElementById('div').innerHTML;
//Place the inner HTML into the text box 'Key'
document.getElementById('Key').value=a;
};
<div id="div" style="width:50px;">Content here...</div>
<input type="text" id="Key"/>
I hope this helps. Happy Coding!
Firstly div is a really bad name for an id - give it something meaningful.
Secondly - do you see the / inside the opening div tag? that means you've just closed the div...
<div id="div" style="width: 50px" />
is the same as
<div id="div" style="width: 50px" /></div> so your code is now
<div id="div" style="width: 50px"></div></div>
and nothing in between the
<div id="div" style="width: 50px" /> and </div> will count as the inner html

How do I make a button that will print out more text every click?

I'm rather new to programming, but let's keep going. My goal is to create a button that when pressed it will print out text. If you press a second time, it will print out text below the original snippet and so on. Basically, if you keep clicking the button you'll get text repeated a number of times below each other. Currently I've achieved a button that when pressed it prints out text. Press it again and it does nothing. Here's the code I used:
<input type="button" value="Duplicate Text" onclick="dup()"/>
<p id="clone"></p>
<script>
function dup() {document.getElementById("clone").innerHTML="Text";}
</script>
I'm sure I've done something wrong. Thanks a million.
If you're convinced that it should work, try it. It WILL print out text, but then when you do it a second time, it does nothing.
The below example is self explanatory
DEMO http://jsfiddle.net/YzqML/
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
Another example with checkbox and label
DEMO http://jsfiddle.net/YzqML/1/
<script>
function myFunction() {
var div = document.getElementById('myItems'),
clone = div.cloneNode(true);
document.body.appendChild(clone);
}
</script>
<div id="myItems">
<label>My Label</label>
<input type="checkbox" />
</div>
<p id="demo">Click the button to clone the above items</p>
<button onclick="myFunction()">Try it</button>
You can create new elements and append them to the DOM, like this:
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
Each time you call the display function, the string you give it is added to a new paragraph (p element) on the page, which is added to the bottom of the body.
I note a jquery tag in your question , so you can do this :
<input type="button" value="Duplicate Text" onclick="$('<p />').appendTo('body')"/>
DEMO :
http://jsfiddle.net/abdennour/GZu38/1/
Copy paste this code in an html file and run in a browser. If you could include Jquery, then more simpler the code would be.
<html>
<head>
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
</head>
<body>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>

Changing a paragraph via a text field using javascript

I want to type in text in a text field, press a button, and the text of a paragraph will change. What would I need to do for this to happen and is there an easier way to do it other than javascript?
Since I didn't know what I needed to do, here's the code I originally had:
<html>
<head>
<title>Moving Text</title>
<link rel="stylesheet" type="text/css" href="stlye.css">
</head>
<body>
<div id="text">
<p id="new">new text</p>
Main News:<input type="text" name="update"><br>
<input type="button" value="Update" onClick="update();">
<script type="text/javascript">
function update(){
document.getElementById('new').innerHTML = 'Update';
}
</script>
</div>
</body>
I'm pretty sure it's wrong or way off. Any suggestions?
HTML:
<p id="your_paragraph">This text will change, after clicking the button.</p>
Main News: <input type="text" id="theText" />
<input type="button" id="btn" value="Update" />
JavaScript:
var p = document.getElementById('your_paragraph');
var btn = document.getElementById('btn');
var txt = document.getElementById('theText');
btn.onclick = function(){
p.textContent = txt.value;
};
http://jsfiddle.net/3uBKC/
No, you'll need to use javascript. Without an example of your markup nobody will be able to provide you a specific example, but here's a general one using the jQuery library.
// get the textarea, watch for change, paste, and keyup events
$('textarea').on('change paste keyup', function(){
// Store the text field as a variable, get it's value
var thiis = $(this),
value = thiis.val();
// replace the paragraph's content with the textrea's value
$('p').html(value);
});

Categories