I want the text typed in textarea with id text in the div element typed, how can i?
head
<script>
function field()
{
var txt = document.getElementById("text").value;
if (txt.length > 0){
document.getElementById("typed").value = txt;
}
}
</script>
body
<input type="text" id="text"></input>
<br>
<b> You Typed : <div id="typed"></div> </b>
<br>
<input type="button" value="Submit" onclick="field()">
.value is for input elements. To put something in a DIV, use .innerText:
document.getElementById("typed").innerText = txt;
DEMO with <input>
DEMO with <textarea>
Change the function like the following
function field()
{
var txt = document.getElementById("text").value;
if (txt.length > 0)
{
document.getElementById("typed").innerText= txt;
}
}
you can with this :
<html>
<head>
<script>
function field()
{
var txt = document.getElementById("text").value;
if (txt.length > 0){
document.getElementById("typed").innerText = txt;
console.log(txt);
}
}
</script>
</head>
<body>
<input type="text" id="text"></input>
<br>
<b> You Typed : <div id="typed"></div> </b>
<br>
<input type="button" value="Submit" onclick="field()">
</body>
</html>
document.getElementById("typed").innerHtml = document.getElementById("text").value;
Related
There is a textarea where someone can write a text. The text could be on multiple lines, I want to check the blank lines in the text and replace them with <p> tags, so the text between 2 blank lines should be wrapped in <p> tags.
So far it is working to check the blank lines and return a boolean if there is a blank line.
function getInputValue() {
// Selecting the input element and get its value
var inputVal = document.getElementById('w3review').value;
var inTxt = document.getElementById('w3review').value;
console.log('intx: ', inTxt);
if (inTxt.match(/^\s*\n/gm)) {
console.log('yes, there is a blank line');
} else {
console.log('nope. no blank lines');
}
document.getElementById('output').innerHTML = inputVal;
}
<!DOCTYPE html>
<html>
<body>
<h1>Enter text:</h1>
<textarea id="w3review" name="w3review" rows="6" cols="15"> </textarea>
<input type="submit" value="Convert to HTML" onclick="getInputValue()" />
<label>HTML output:</label>
<textarea id="output" name="w3review" rows="6" cols="15"> </textarea>
<script src="script.js"></script>
</body>
</html>
Is there a way to replace the blank lines with tags and also show it in the output as HTML, not to show it with but with the HTML parsing of it?
EDIT - updated to reflect the OP's requirements as noted in the comments
Simply split the textarea value at the newlines, then build a string with the portions encased in the p element tags - and then insert that string as the innerHTML of an output div. You cannot have html within a textarea - so the only way to do it is to create the elements - if you inspect the output div - you will see that ervery portion of the textarea input is encased in <p>...</p> tags - with the emty line in the textarea translating to an empty p element in the output.
function getInputValue() {
// Selecting the input element and get its value
var inputVal = document.getElementById('w3review').value;
const newTextPortions = inputVal.split('\n');
newTextStr = ''
newTextPortions.forEach(function(portion){
newTextStr += "<p>" + portion + "</p>"
})
document.getElementById('output').innerHTML = newTextStr;
}
<label>Enter text</label>
<textarea id="w3review" name="w3review" rows="4" cols="15"> </textarea>
<input type="submit" value="Convert to HTML" onclick="getInputValue()" />
<div id="output"></div>
If you prefer to use HTML instead of a textarea (as you can't have HTML in a textarea), then you can write HTML into a div instead:
function getInputValue() {
// Selecting the input element and get its value
var inputVal = document.getElementById('w3review').value;
var inTxt = document.getElementById('w3review').value;
console.log('intx: ', inTxt);
if (inTxt.match(/^\s*\n/gm)) {
console.log('yes, there is a blank line');
} else {
console.log('nope. no blank lines');
}
document.getElementById('output').innerHTML = '<p>' + inTxt.replaceAll(/(\n+)/g, '</p><p>') + '</p>';
}
<!DOCTYPE html>
<html>
<body>
<h1>Enter text:</h1>
<textarea id="w3review" name="w3review" rows="6" cols="15"> </textarea>
<input type="submit" value="Convert to HTML" onclick="getInputValue()" />
<label>HTML output:</label>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
Short answer:
use replace insted of if
function getInputValue() {
// Selecting the input element and get its value
var inputVal = document.getElementById('w3review').value;
var inTxt = document.getElementById('w3review').value;
console.log('intx: ', inTxt);
inTxt = inTxt.replace(/(\r\n|\n|\r)/gm," ");
inTxt = inTxt.replace(" "," ");
document.getElementById('output').innerHTML = inTxt;
}
Long answer (Best practice):
Create a function that sanetizes the input, creates "actual" P-tags and append them to the DOM and/or show render them in the textfield.
You can't show rich-content in the textfield, but one approach is to create a fake-textfield -> Format text in a <textarea>?
<!DOCTYPE html>
<html>
<body>
<h1>Enter text:</h1>
<textarea id="w3review" name="w3review" rows="6" cols="15"> </textarea>
<input type="submit" value="Convert to HTML" onclick="getInputValue()" />
<label>HTML output:</label>
<textarea id="output" name="w3review" rows="6" cols="15"> </textarea>
<script src="script.js"></script>
<div id="target"> </div>
</body>
<script>
function getInputValue() {
// Selecting the input element and get its value
var inputVal = document.getElementById('w3review').value;
var inTxt = document.getElementById('w3review').value;
console.log('intx: ', inTxt);
inTxt = inTxt.replace(/(\r\n|\n|\r)/gm,",");
let textArray = []
let sanitizedArray = []
textArray = inTxt.split(",")
console.log(textArray)
//Sanitize the array
textArray.map((data, index)=> data === ""? console.log(`Index ${index} is empty don't push`): sanitizedArray.push(data))
console.log(sanitizedArray)
function createValidHtml(content){
const target = document.getElementById("target")
let pTag = document.createElement("p")
pTag.innerHTML = content
target.appendChild(pTag)
}
sanitizedArray.map(data => createValidHtml(data))
//Set as value of output-textfield (if necessary)
const target = document.getElementById("target")
document.getElementById('output').innerHTML = target.innerHTML
}
</script>
</html>
I write with translate.
I want the input text to appear in the paragraph, then click the button .
html code:
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>
JS code:
var txt = JSON.parse(demo);
function myFunction() {
var txt = JSON.parse(demo);
function myFunction() {
document.getElementById("test").innerHTML = txt;
}
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>
You need to get the value of the input in the function. There's no need to use JSON.parse.
function myFunction() {
document.getElementById("test").innerHTML = document.getElementById("demo").value;
}
<input id="demo">
<button onclick="myFunction()">Click me</button>
<p id="test"></p>
function copyToParagraph() {
var inputValue = document.getElementById('txtInput').value;
var paragraphEle = document.getElementById('par');
paragraphEle.innerHTML = inputValue;
console.log(inputValue);
console.log(paragraphEle);
}
<input type="text" id="txtInput" />
<br/>
<button onclick="copyToParagraph()">Click Me to Copy</button>
<br/><br/><br/>
<p id="par"></p>
You need to make a var input = document.getElementById('input').value; So that you have the value. Then do this:
function myFunction() {
var input = document.getElementById('input').value;
document.getElementById('demo').innerHTML = input;
}
I need to create two input text boxes that when the UpperCase button is clicked the input text is returned all in caps and when the LowerCase button is clicked the input text is returned in lower case. So for example:
Text: SuNsHiNe ToDaY
(upper case button)= SUNSHINE TODAY
(lower case button)= sunshine today
I have pasted the html code below and need help creating the JS code:
<!doctype html>
<html>
<head>
<script src='../p3-case.js'></script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" value="upperCase"/>
<input type="button" id="btn2" value="lowerCase"/>
</form>
</body>
</html>
I think you not need to use any external js just using Jquery
You need to use toLowerCase() and toUpperCase()
$("#btn1").click(function(){
var input = $("#input1");
input.val(input.val().toUpperCase());
});
$("#btn2").click(function(){
var input = $("#input1");
input.val(input.val().toLowerCase());
});
Here is sample of jsbin JSBIN
Here you go:
<!doctype html>
<html>
<head>
<script>
function upper()
{
var uc = document.getElementById('input1').value;
document.getElementById('input1').value = uc.toUpperCase();
}
function lower()
{
var lc = document.getElementById('input1').value;
document.getElementById('input1').value = lc.toLowerCase();
}
</script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" value="upperCase" onclick="upper();">
<input type="button" id="btn2" value="lowerCase" onclick="lower();">
</form>
</body>
</html>
writing from my tablet but i try my best! :)
Pure JavaScript:
Add onclick event to the button:
<input type="button" onclick="toupp()" id="btn1" value="upperCase";">
Then the functions
<script>
var toupp = function(){
var text = document.getElementById("input1").value;
document.getElementById("input1").value = text.value.toUpperCase();
}
and the other function:
var tolow = function(){
var text = document.getElementById("input1").value;
document.getElementById("input1").value = text.toLowerCase();
}
</script>
This code works perfectly for me
<!doctype html>
<html>
<head>
<script >
function toUpper(){
var obj = document.getElementById("input1");
var str = obj.value;
var res = str.toUpperCase();
obj.value = res;
}
function toLower(){
var obj = document.getElementById("input1");
var str = obj.value;
var res = str.toLowerCase();
obj.value = res;
}
</script>
</head>
<body>
<form action="demo_form.asp" id="demo_form">
Phrase:
<input type="text" id="input1" name="changeCase" placeholder="Put Phrase Here">
<br>
<input type="button" id="btn1" onClick='toUpper()' value="upperCase";">
<input type="button" id="btn2" onClick='toLower()' value="lowerCase">
</form>
</body>
</html>
The code should receive a sentence / string and print it in reverse, if word or letter that wrote in the filter contained within the word belongs to a string - the word will not print.
The question why my check alert "hi" not working?? tnx!
<html>
<head>
<script>
function myfunc() {
alert ("hi");
var count=0;
var phrase= document.getElementById('phrase').value;
var filter = document.getElementById('filter').value;
var arrReverse = phrase.split(" ").reverse();
for (i=0; i<arrReverse.length; i++) {
if (arrReverse[i].search(filter)==-1) {
if (i%2==0) {
document.getElementById('words').innerHTML="<span class="word"><u>"arrReverse[i]"</u><span>";
} else {
document.getElementById('words').innerHTML="<span class="word">"arrReverse[i]"<span>";
}
} else if (arrReverse[i].search(filter)!=-1) { count++; }
if (count>0) {
document.getElementById('count').innerHTML="<span class="count">"count "word(s) filtered out <span>";
}
}
</script>
</head>
<body >
<h1>Sentence Reverser!</h1>
<div> Phrase: <input id="phrase" type="text" size="40"/></div>
<div> Filter: <input id="filter" type="text" size="10"/></div>
<div><button id="go" onclick="myfunc()"> Go! </button></div>
<div id="words"></div>
<div id="count"></div>
</body>
</html>
Be careful with "" quotes and '' quotes:
.innerHTML="<span class="word"><u>"arrReverse[i]"</u><span>"; // wrong
.innerHTML="<span class='word'><u>"+arrReverse[i]+"</u><span>"; //right
For further reference check:
http://www.w3schools.com/js/js_obj_string.asp
Can anyone provide insight on removing a text field element that was just appended? I haven't been able to get other posted solutions to work with the code I'm using. Thanks in advance.
<html>
<head>
<script>
function append(num) {
var txt = document.getElementById("result").value;
txt = txt + num + " ";
document.getElementById("result").value = txt;
}
</script>
</head>
<body>
<form>
<input type="button" value="A" onclick="append(this.value)">
<input type="button" value="B" onclick="append(this.value)">
<input type="button" value="C" onclick="append(this.value)">
<br>
<br>
<input type="text" id="result" size="100">
<br>
<br>
<input type="button" value="Clear Last" onclick="?">
<input type="reset" value="Clear All">
</form>
</body>
</html>
Try this:
function append(num) {
if (append.prev) {
//do something
console.log(append.prev);
}
var txt = document.getElementById("result").value;
txt = txt + num + " ";
document.getElementById("result").value = txt;
append.prev = num;
}
Working Fiddle (check in console)