I created a output document , in each Textarea and Textbox there is a line break i want to know how to remove it
Line break are usually "\n". So if you want to output or show it in a "div" tag, then you go with this code:
function formatData(){
var inpData = document.getElementById("textInput").value.split("\n");
var outputData = "";
for(var i = 0;i < inpData.length; i++){
outputData += inpData[i];
}
document.getElementById("textOutput").innerHTML = outputData;
}
<textarea rows="4" id="textInput"></textarea>
<button onclick="formatData()">Display Formatted Data</button>
<div id="textOutput"></div>
Related
I'm taking the content of a textarea and saving it in a variable. But I notice that when I save the content, the variable ignores the spacing (new lines). How do I fix this. I want the variable to store the structure of the text, with all the new lines and tabs. My code in which I save the content from the textarea is below:
let content = document.getElementById('content').value
The whole function is below:
function mail(){
var options = document.getElementById('users').options
let content = document.getElementById('content').value
var emails = []
var regex = /\*user\*/gi
for(var i = 2; i < options.length; i++){
emails.push(options[i].innerHTML)
content = content.replace(regex, emails[i-2])
window.open(`mailto:${emails[i-2]}?subject=To ${emails[i-2]}&body=${content}`)
}
}
Thanks!!! Any help is appreciated!
Actually, spaces and new lines are exists but because you put your content in html (body{}), they are invisible.
some solutions:
let content = document.getElementById('content').value.replace(/\n/g,"<br/>").replace(/ ( +)/g,function(a,b){var s="", i=0; for(;i<b.length;i++)s+=" "; return " "+s;});
or this:
let content = "<pre>"+document.getElementById('content').value+"</pre>"
or this:
let content = "<div style='white-space: pre'>"+document.getElementById('content').value+"</div>"
The above solutions were for when the body is html.
Edit:
I guess this will solve your problem:
let content = escape(document.getElementById('content').value);
The variable does contain new lines if new lines are entered in the textarea. Keep in mind that textarea will wrap the text to fit it so if you see wrapped text, that doesn't mean there is a new line character in the text.
<textarea id="content"></textarea>
<input type="button" value="submit" onclick="msg()">
<script>
function msg() {
let message = document.getElementById('content').value;
alert(message);
}
</script>
I am having trouble with my onchange not working and storing numbers in an array via a text box.
What I want the code to do is to get statistics on the numbers inputted into the text box. I do this by having the user input numbers into the text box and hit the Enter key to display those numbers. The numbers should be put into an array before being put into a list to display the inputted numbers. However, I keep getting this error where the onchange is not triggering when hitting the Enter key or clicking off of the text box.
Here is an image of the error I am getting when inspecting the code
With the numbers stored in the array, I want to try to get the Mean of the numbers. But, I keep getting the error "NaN" which makes me think that my numbers are not getting stored into the array properly.
Here is the code:
<html>
<head>
<title>Stats</title>
</head>
<p>Array is called numbers. numbers.sort();</p>
<div id="stats">
<input type ="text" id="value" onchange="list()"> <!-- Getting the Onchange Error here -->
<button id="button1" onclick = "list()">Enter</button>
<ul id="list1">
</ul>
<button id="stat_button" onclick="calculateMean()">Get Statistics</button>
<p id="mean">Mean= </p>
</div>
<script>
function list() {
var liElement = document.createElement("li"); //Creating new list element//
var ulElement = document.getElementById("list1"); //Get the ulElement//
var input = document.getElementById("value").value; //Get the text from the text box//
var numbers = []; //create Array called numbers
numbers.push(input);//adds new items to the array
//for loop//
for(var i=0; i < numbers.length; i++) {
liElement.innerHTML = numbers[0]; //Puts the array into the list for display//
ulElement.appendChild(liElement); //add new li element to ul element//
}
}
function calculateMean() {
var meanTotal = 0;
var meanAverage = 0;
var meanArray = [];
for (var i = 0; i < meanArray.length; i++) {
meanTotal += meanArray[i];
}
meanAverage = (meanTotal / meanArray.length);
document.getElementById("mean").innerHTML = meanAverage;
}
</script>
Try adding it through addEventListener instead of inline like that:
document.getElementById('value').addEventListener('change', function(e){
list()
})
The reason the Mean is always NaN is because your mean array is always an empty array when you start with. I think you were referring to a numbers array here.
You will have to declare the array outside the scope of the 2 functions, since it is the common to both.
And it is always a better idea to decouple Javascript and HTML. Bind your events in JS instead of inline event handlers.
Note: When you read the value from the input, it is a string, so convert it to a number before storing it in the numbers array.
HTML
<p>Array is called numbers. numbers.sort();</p>
<div id="stats">
<input type="text" id="value">
<!-- Getting the Onchange Error here -->
<button id="button1">Enter</button>
<ul id="list1">
</ul>
<button id="stat_button">Get Statistics</button>
<p id="mean">Mean= </p>
</div>
JS
document.getElementById('value').addEventListener('change', list);
document.getElementById('button1').addEventListener('click', list);
document.getElementById('stat_button').addEventListener('click', calculateMean);
var numbers = [];
function list() {
var liElement = document.createElement("li"); //Creating new list element//
var ulElement = document.getElementById("list1"); //Get the ulElement//
var input = document.getElementById("value").value; //Get the text from the text box//
numbers.push(input); //adds new items to the array
//for loop//
for (var i = 0; i < numbers.length; i++) {
liElement.innerHTML = numbers[0]; //Puts the array into the list for display//
ulElement.appendChild(liElement); //add new li element to ul element//
}
}
function calculateMean() {
var meanTotal = 0;
var meanAverage = 0;
for (var i = 0; i < numbers.length; i++) {
meanTotal += numbers[i];
}
meanAverage = (meanTotal / numbers.length);
document.getElementById("mean").innerHTML = meanAverage;
}
jsFiddle
I am trying to limit the number of characters printed on a lable with a js file. The part of the code i am having problems with is called by a button and prints the contents from a preview box. Everything is working except the length of the title i am trying to print. When ever i add the code to limit the numbers of characters i get:
TypeError: title.substring is not a function
title = title.substring(0, 11); any ideas
// To allow for the TEMP SLU's to be printed from the main page in alpha order
$("#barcodesku").live('click', function(){
var title=[];
var sku=[];
var first = "";
var second = "";
var indexGlobal = 0;
$('#acctRecords tbody tr').each(function()
{
sku.push($(this).find('#tableSKU').html());
title.push ($(this).find('#tableTitle').html());
}); //end of acctRecords tbody function
//Print the bar codes
title = title.substring(0,16);
var x=0;
for (x=0;x<sku.length;x++){
first += '$("#'+indexGlobal+'").barcode("'+sku[x]+'", "codabar",{barHeight:40, fontSize:30, output:"bmp"});';
second += '<div class="wrapper"><img src="../images/temp.jpg" /><div id="'+indexGlobal+
'"></div><div class="fullSKU">      '+sku[x]+'</div><br/><div class="title", {title.substring(0,16)}; >'+title[x]+' </div></div><br/><br/>';
indexGlobal++;
}
var barcode = window.open('','BarcodeWindow','width=200');
var html = '<html><head><title>Barcode</title><style type="text/css">'+
'.page-break{display:block; page-break-before:always; }'+
'body{width: 2in;}'+
'.wrapper{height: 1in;margin-left:10px;margin-top:5px;margin-right:5px;}'+
'.fullSKU{float: left;}'+
'.shortSKU{float: right;font-size:25px;font-weight:bold;}'+
'.title{float: left;}'+
'</style><script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script><script type="text/javascript" src="../barcode/jquery-barcode.js"></script><script>$(document).ready(function() {'+first+'window.print();window.close();});</script></head><body>'+second+'</body></html>';
barcode.document.open();
barcode.document.write(html);
barcode.document.close();
}); // end of click function
From your code I see title is an array of titles. You need to do the following:
for (var i = 0; i < title.length; i++) {
title[i] = title[i].substring(0, 11);
}
I tried to build an application in which , there is one HTML page from which I get single input entry by using Submit button, and stores in the container(data structure) and dynamically show that list i.e., list of strings, on the same page
means whenever I click submit button, that entry will automatically
append on the existing list on the same page.
But in this task, firstly I try to catch that input in javascript file, and I am failing in the same. Can you tell me for this, which command will I use ?
Till now my work is :-
HTML FILE :-
<html>
<head>
<script type = "text/javascript" src = "operation_q_2.js"></script>
</head>
<body>
Enter String : <input type= "text" name = "name" id = "name_id"/>
<button type="button" onClick = "addString(this.input)">Submit</button>
</body>
</html>
JAVASCRIPT FILE:-
function addString(x) {
var val = x.name.value;
//var s = document.getElementById("name_id").getElementValue;//x.name.value;
alert(val);
}
EDITED
My New JAVASCRIPT FILE IS :-
var input = [];
function addString(x) {
var s = document.getElementById("name_id").value;//x.name.value;
input.push(input);
var size = input.length;
//alert(size);
printArray(size);
}
function printArray(size){
var div = document.createElement('div');
for (var i = 0 ; i < size; ++i) {
div.innerHTML += input[i] + "<br />";
}
document.body.appendChild(div);
//alert(size);
}
Here it stores the strings in the string, but unable to show on the web page.
See this fiddle: http://jsfiddle.net/MjyRt/
Javascript was almost right
function addString(x) {
var s = document.getElementById("name_id").value;//x.name.value;
alert(s);
}
Try to use jQuery (simpler)
function addString() {
var s = $('#name_id').val();//value of input;
$('#list').append(s+"<br/>");//list with entries
}
<div id='list'>
</div>
I need to import some formatted html text in a input textarea value
i use jquery
so what's the best way to do it?
i guess first off i need to replace the then strip out the rest (bold, italic, images etc..)
In my first response I didn't see that you wanted to retain line breaks, so here's a better version. It replaces br with an unlikely string %%br%% and then at the end replaces them with new line (\n). So if that string actually appears in the text, it will be replaced by a new line. You can change that to anything you like, just make it something that is unlikely to be encountered in the text.
<script>
function removeMarkup(m) {
var d = document.createElement('div');
d.innerHTML = m;
var c = 0;
// Make brString something that should never appear in the text
// and has no special meaning in a RegExp
var brString = '%%br%%'
var re = new RegExp('\\s*' + brString + '\\s*','g');
function getTextWithReturns(node) {
var tag = node.tagName && node.tagName.toLowerCase();
var nodes = node.childNodes;
var type = node.nodeType;
var s = '';
// Deal with br
if (tag == 'br') {
return brString;
}
if (nodes && nodes.length) {
for (var i=0, iLen=nodes.length; i<iLen; i++) {
s += getTextWithReturns(nodes[i]);
}
} else if (type == 3 || type == 4) {
s += node.nodeValue
}
return s;
}
return reduceWhitespace(getTextWithReturns(d)).replace(re,'\n');
}
function reduceWhitespace(s) {
return s.replace(/^\s*/,'').replace(/\s*$/,'').replace(/\s+/g,' ');
}
</script>
<div id="d0">some text <i>more</i> text
<p>Here is a paragraph with some <b>bold</b> and <i>italic</i> text, plus a <span>span</span> and a line break break break<br> about there.</p>
<p>Here is another paragraph with some <b>bold</b> and <i>italic</i> text, plus plus a <span>span</span> and a line break <br> here.</p>
</div>
<form>
<textarea id="ta0" rows="10" cols="50"></textarea>
<button type="button" onclick="
var ta = document.getElementById('ta0');
var div = document.getElementById('d0');
ta.value = removeMarkup(div.innerHTML);
">Set value</button><input type="reset">
</form>
$("#my_textarea").change(function(){
var cleanText = $("<span />").html(this.value);
this.value = cleanText.text();
});
Example: http://jsfiddle.net/6WbXN/