I would like to take the text from two text areas and insert them concatenated into a following paragraph. I've made a calculator and odd/even validator, and had been able to draw the user input values just fine. Is there something different with text?
<p>
<textarea id="text1" rows="4" cols="50">Type here!</textarea>
<br>
<textarea id="text2" rows="4" cols="50">Now type something here!</textarea>
<br>
<button type="button" onclick="tafunc()">Click here to put text in paragraph below!</button>
</p>
<p id="result"></p>
<script>
function tafunc() {
var first, second, bothtextareas;
first = document.getElementById("text1").value;
second = doucment.getElementById("text2").value;
bothtextareas = first.concat(" ", second);
document.getElementById("result").innerHTML = bothtextareas;
}
</script>
document is misspelled in second assignment. and using value attribute for textarea is correct!
HTML:
<textarea id="text1" rows="4" cols="50">Type here!</textarea>
<br>
<textarea id="text2" rows="4" cols="50">Now type something here!</textarea>
<br>
<button id="btn1" type="button">Click here to put text in paragraph below!</button>
</p>
<p id="result"></p>
change your inline javascript to this:
var btn = document.getElementById("btn1");
btn.onclick = function () {
var first, second, bothtextareas;
first = document.getElementById("text1").value;
second = document.getElementById("text2").value;
bothtextareas = first.concat(" ", second);
document.getElementById("result").innerHTML = bothtextareas;
}
and here's a working jsFiddle
Related
I have an input box that I am typing into and a submit button. I want to display whatever is typed into the input box in a blank pre-existing <p> tag. How can I do this?
I currently have this code:
<label for="moveData">Enter data</label>
<input type="text" id="moveData" name="moveData"><br>
<button id="btn" type="button">Move the data</button>
<script>
document.getElementById("btn").onclick = function()
{
var input = document.getElementById("btn").value;
document.getElementById("p1").innerHTML = input;
}
</script>
<p id="p1"></p>
I want the <p id="p1"></p> to be replaced with the user text input as so: <p id="p1">(USER INPUT GOES HERE)</p> after the submit button is clicked.
You are picking the value from the button instead of the input. You just need to change this line:
<label for="moveData">Enter data</label>
<input type="text" id="moveData" name="moveData"><br>
<button id="btn" type="button">Move the data</button>
<script>
document.getElementById("btn").onclick = function() {
var input = document.getElementById("moveData").value; // <-- this line
document.getElementById("p1").innerHTML = input;
}
</script>
<p id="p1"></p>
I was trying to make a "find and replace" page and my code is working properly except that the resulting string is only displayed for a split second before it disappears and the form is reset
Here is the HTML
<body>
<form>
Text<textarea id="string"></textarea>
<br>
Find:<input type="text" id="keyword">
<br>
Replace with:<input type="text" id="replacewith">
<button id="replace" onclick="findReplace()">Find and Replace</button>
</form>
<p id="result"></p>
</body>
Here is the js
<script>
function findReplace(){
var str = document.getElementById("string").value;
var input = document.getElementById("keyword").value;
var replaced = document.getElementById("replacewith").value;
var x = str.replace(input, replaced);
document.getElementById("result").innerHTML = x;
}
</script>
You will have to prevent the form from submitting, either by:
- Using findReplace as the submit eventHandler and calling event.preventDefault()
- Adding type="button" to the button element. (h/t radulfr)
- Adding onsubmit="return false" to your form element:
function findReplace() {
var str = document.getElementById("string").value;
var input = document.getElementById("keyword").value;
var replaced = document.getElementById("replacewith").value;
var x = str.replace(input, replaced);
document.getElementById("result").innerHTML = x;
}
<form onsubmit="return false">
Text<textarea id="string"></textarea>
<br> Find:
<input type="text" id="keyword">
<br> Replace with:<input type="text" id="replacewith">
<button id="replace" onclick="findReplace()">Find and Replace</button>
</form>
<p id="result"></p>
I have a school project, where they asked us to create a form where you input values, and when you click submit, a new note will shoe and will be filled with the values from the form.
My problem is that I can't understand how to write the function that creates the notes with the values from the form.
I already did the form and the design for the page. Also started the function to create the note.
This is the form:
<form id="form1">
Mission Details: <textarea name="Details" rows="3" cols="20"></textarea> <br> <br>
Mission Due Date: <input type="Date" name="Date"> <br> <br>
Mission Due Time: <input type="Text" name="Time"> <br> <br>
<button type="button" onsubmit="createNote()"> Submit </button>
<button type="button" onclick="Clear()"> Clear </button>
</form>
This is the script i started:
function CreateNote(event) {
var form = event.currentTarget;
var details = form.Details.value;
var date = form.Date.value;
var time = form.Time.value;
}
var form = document.getElementById('form1');
form.onsubmit = CreateNote();
This is the div for the note and note content:
<div class="note">
<div class="noteDetails">
</div>
</div>
Eventually, the note will have a background from an image in a CSS file, and inside that note, it will have the values from the form.
1. Create a template for your note, lets say you display your text with <p></p>.
2. Leave it with empty values. Give it an id, lets call it "details".
3. After you have the desired values, use document.getElementById("details"), and fill the <p> with the value.
<div class="note">
<div class="noteDetails">
<p id="details"></p>
</div>
</div>
then in your JavaScript you can use
var stringInput = "Some String";
var detailsElement = document.getElementById("details");
detailsElement.innerHTML = " stringInput;
You can now use your div noteDetails. Inside it create three p elements with id details, date and time.
eg:
<div class="noteDetails">
<p id="details"></p>
<p id="date"></p>
<p id="time"></p>
</div>
Change your button element to:
<button type="button" onclick="createNote()"> Submit </button>
Note: your using createNote() in html and using CreateNote in JS
and inside your createNote function just add
function createNote() {
var form = document.getElementById('form1');
var details = form.Details.value;
var date = form.Date.value;
var time = form.Time.value;
var detailsPara = document.querySelector('#details');
detailsPara.innerText = details;
var datePara = document.querySelector('#date');
datePara.innerText = date;
var timePara = document.querySelector('#time');
timePara.innerText = time;
}
remove lines from your code
var form = document.getElementById('form1');
form.onsubmit = CreateNote();
UPDATE: if input values are to be shown immediately then add these to html
Mission Details: <textarea name="Details" rows="3" cols="20" oninput="createNote()"></textarea> <br> <br>
Mission Due Date: <input type="Date" name="Date" oninput="createNote()"> <br> <br>
Mission Due Time: <input type="Text" name="Time" oninput="createNote()"> <br> <br>
So I'm inspecting a website field where I can enter text. On most text boxes/fields, when you enter text, it will be saved as 'innerText' or as a value 'text', but this field doesn't save the string like that anywhere in html. This means I can't edit the text that is in that field.
Where would this string be stored, and how could I edit it using javascript?
<div id="mirror" class="mirror-text style-scope iron-autogrow-textarea" aria-hidden="false">sdslll </div>
<div class="textarea-container fit style-scope iron-autogrow-textarea">
<textarea id="textarea" class="style-scope iron-autogrow-textarea" rows="3" autocomplete="off" required="" maxlength="10000"></textarea>
</div>
As you can see, "mirror" holds the text I want to edit. But when I edit that, it doesn't take effect
<html>
<body>
<input id='in' type='text' />
<h3 id='out'></h3>
<script>
let input = document.getElementById('in');
let output = document.getElementById('out');
document.onkeyup = function () {
output.innerHTML = input.value;
};
</script>
</body>
</html>
<script>
window.onload = function () { setValue(); }
function setValue(){
document.getElementById("mirror").value = "Some value here";
}
</script>
<input id="mirror" class="mirror-text style-scope iron-autogrow-textarea" aria-hidden="false" value="sdslll ">
<div class="textarea-container fit style-scope iron-autogrow-textarea">
<textarea id="textarea" class="style-scope iron-autogrow-textarea" rows="3" autocomplete="off" required="" maxlength="10000"></textarea>
</div>
For example, if I have the following text inside textarea:
<textarea rows="20" cols="50" id="targetTextArea">
How to
print each
line from
textarea using
innerHTML and
javascript
</textarea>
Then I want to use innerHTML and javascript to parse this textarea and print it on the same page.
Reason, while printing on the page, I would like to prefix by adding some static text to each line, let's say output should look like:
Read How to
Read print each
Read line from
Read textarea using
Read innerHTML and
Read javascript
Thanks in advance.
All of my html page content is below. I want to learn how to print what's in textarea on the same page.
<html>
<body>
Print the contents of textarea as is inside html page
<br/>
<textarea rows="20" cols="50" id="targetTextArea">
How to
print each
line from
textarea using
innerHTML and
javascript
</textarea>
<br/>
<button type="button" onclick="printonpage()">Print on Page</button>
</body>
</html>
You can use the value property to get the text out of the texarea. Then replace each newline with the desired text.
function printonpage() {
var text = document.getElementById('targetTextArea');
var val = text.value;
var arr = val.split("\n");
arr = arr.slice(0, arr.length -1);
var newText = "Read " + arr.join("<br>Read ");
var output = document.getElementById('output');
output.innerHTML = newText;
}
Print the contents of textarea as is inside html page
<br/>
<textarea rows="6" cols="50" id="targetTextArea">
How to
print each
line from
textarea using
innerHTML and
javascript
</textarea>
<br/>
<button type="button" onclick="printonpage()">Print on Page</button>
<div id="output"></div>
You can use following code to do the same. This code using innerHTML and javascript
var textareastext = "<pre>"+ document.getElementById('targetTextArea').value+"</pre>";
document.getElementById('innerhtml').innerHTML = textareastext;
document.getElementById('targetTextArea').style.display = 'none';
window.print();
<textarea rows="20" cols="50" id="targetTextArea">
How to
print each
line from
textarea using
innerHTML and
javascript
</textarea>
<div id="innerhtml"></div>
Check out this fiddle. (I have used jQuery)
Get the innerHTML by the mehod .html().
split it with regex /\n/ (newLine).
Concatenate the substrings with additional "Read".
Alert the final result.
Here is the snippet.
$('#click').click(function() {
var text = $('#targetTextArea').html();
var lines = text.split(/\n/);
var finalText = '';
for (i in lines) {
finalText = finalText + 'Read ' + lines[i] + '\n';
}
alert(finalText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<textarea rows="20" cols="50" id="targetTextArea">How to
print each
line from
textarea using
innerHTML and
javascript</textarea>
<input type="button" value="Click Me" id="click" />