Changing a paragraph via a text field using javascript - 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);
});

Related

How to make entered text appear on the screen

Say I have a <textarea> element in my HTML, and I have a send button. When you press that send button, the text in the <textarea> element should appear on the screen.
I tried putting this JavaScript code in my head section:
<script>
function displayText(element, change_to) {
document.getElementById(element).innerHTML = document.getElementById(change_to).innerHTML
}
</script>
And this is the body section:
<body>
<p id="msg"></p>
<textarea id="enterMsg"></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
But that didn't work.
You should use value property for the textarea element. I will also suggest you use innerText or textContent if the value is plain text (not htmlString):
<script>
function displayText(element, change_to) {
document.getElementById(element).textContent = document.getElementById(change_to).value
}
</script>
<body>
<p id="msg"></p>
<textarea id="enterMsg"></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
textarea don't have innerHTML, you should use .value instead

Creating a "Copy button"

Well, as I was searching on the internet for some basic codes to examine - I found this one. A simple code which is supposed to copy the selected text. As i am a complete newbie in JS, I check the meaning of the methods that I didn't understand - and rewrited the code, as i make a few adjustments.
And still the code is not working and If someone can explain - this part ""copyit(this.form.select1)"" - Even though I kind of understand "this" - i am not able to understand what is doind here
function copyit(theField) {
var selectedText = document.getSelection();
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
This is the original code - and it is not working either
<SCRIPT LANGUAGE="JavaScript">
function copyit(theField) {
var selectedText = document.selection;
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
And in the body of your web page, add the following where you want the text to appear:
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
onclick="copyit(this.form.select1)"
executes the copyit() function and passes a variable which is later named theField. The variable that is passed is this.form.select1 which is a textarea with ID select1 which is located in the same form as the input you're clicking hence the this.form.
As to why your code isn't working - you should include here the original code before your adjustments. You probably deleted/changed something you shouldn't have.
I'm not sure what you're asking. Are you asking to, when someone clicks on any button/div, it copies a text you want for his clipboard? If no, ignore my comment, if yes, i'll explain:
First place, where should an user click?
<a class="btn" CopydivFunction(#text)">CLICK ME TO Hello.</a>
Now, add the function with JS.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Now, place the text you want somebody to copy (hide it):
<h1 id="text" class="hidden">some text. This part won't be seen because of the hidden class, and this is the text that will be copied to your clipboard.</h1>
Place display:none on css:
#text{
display:none;
}
I think you have to add that, so nobody sees it.
And that should be it, click the <a> and you get the text in the h1#text

Can't change a paragraph text in javascript through DOM

it changes for about a second and returns to the previous text.The "Loading..." line has to change into "hi, Please click the next text box to see more instructions!".
I have tried it latest chrome and Edge browsers.
function greetMe() {
var yourName = document.getElementById("textbox").value;
info1 = "hi, Please click the next text box to see more instructions!"
document.getElementById("textToChange").innerHTML = info1
}
#myForm {
float: left;
width: 30%
}
#myformInfo {
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>HEllO ThERE!</h1>
<div id="myForm"><form >
<input id="textbox" placeholder="Your name">
<button onclick="greetMe()">click!</button>
<br><br>
<input id="">
</div></form>
<div id="myFormSteps">
<p id="textToChange">
<script>var info1 = "Loading..."
document.write(info1)
</script>
</p>
</div>
</body>
</html>
It's probably because you haven't set the type attribute for your button. A button's default type is submit. Try adding the attribute type="button" to your <button>.
When you click the button your form is submitting and the page is reloading - that's why it returning to its initial state. To stop this happening pass in event as a parameter to the function and then use that argument in the function with preventDefault():
HTML
<button onclick="greetMe(event);">click!</button>
JS
function greetMe(e) {
e.preventDefault();
// ...
}
As an aside it's better is to remove your inline JS and use an event listener instead.
var button = document.querySelector('button');
button.addEventListener('click', greetMe, false);

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(){
}

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>

Categories