I'm quite new in Javascript. Sorry if I say some absurd. None of the previous answers I found here worked in my case...
The code gets an index from a selected option from a dropdown list generated by an array loop, and uses this index to post description of a product in a textarea. Ideal would be one in each line. But whenever I add '\n'(added only for visualization by the end of the code) or '

'; the dropdown list itself disapears. Trying '< br>' does not work either.
pr[] is a nested array that contains a description of 10 products (ex adidas soccer ball) in its first position and price at the second.
The function buy() is called by a button onclick event, each time it is called it adds one product to the textarea.
Thanks in advance!
textd=" ";
valord=0;
function buy() {
var e = document.getElementsByTagName("select");
var f = e[0].selectedIndex;
textd +=pr[f][0];
valore = valord += pr[f][1];
document.getElementById("compras").value=textd\n;
document.getElementById("valor").value ="R$ "+ valore+",00";
}
You need to add "\n" to the end of the string while adding text to text area, then this "\n" ensures that row will be displayed in a new line instead of same line.
Look at the following code
<!DOCTYPE html>
<html>
<body>
<script>
function appendText()
{
debugger;
var ele = document.getElementById("textArea");
var text = ele.value;
text += "im clicked\n";
text +="clicked again\n";
text +="clicked third time\n";
text +="clicked forth time";
ele.value = text;
}
</script>
<textarea rows="4" cols="50" id="textArea">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>
<button type="button" onclick="appendText()">Click me </button>
</body>
</html>
You may need to change your code to
textd +=pr[f][0] + "\n";
document.getElementById("compras").value=textd;
Related
I want to allow a user to select, create a range, and then have javascript remove the underline on the range that the user selects. For example, If I have the code
<u> Hello, my name is Justin, and I have a question </u>
And the user selects "Justin, and I" and hits un-underline, would it be possible to change the HTML to:
<u> Hello, my name is </u>
Justin, and I
<u> have a question </u>
or if the entire sentence is selected, have the entire element deleted and replaced with normal text?
The solution has bugs if selected both underline and normal text at same time, i am trying to fix it.
getSelection() to get selected text.
getRangeAt(0) get selected index in string, remember to +3 because the length of <u> is 3.
Use slice() create new html and replace the old html.
function selected() {
let target = document.getSelection(),
range, res
if (target.toString() === '') return
range = target.getRangeAt(0)
if (range.commonAncestorContainer.parentElement.tagName != 'U') return
res = range.commonAncestorContainer.parentElement.outerHTML
let head = res.slice(0, range.startOffset + 3),
middle = `</u>${target.toString()}<u>`,
tail = res.slice(range.endOffset + 3)
range.commonAncestorContainer.parentElement.outerHTML = head + middle + tail
}
document.onmouseup = selected;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<u>Hello, my name is Justin, and I have a question</u>
</body>
</html>
I have to show pdf books in Hebrew, but the Hebrew alphabet has 2 styles of text (with dots and without dots).
When book has text style with dots - appear issues occur: when I select text - it randomly has spaces in one word and also problems with search.
So I want to change text rendering function and implement it.
HTML:
Enter input text here:<br/>
<textarea id="input" rows="10" cols="60"></textarea><br/><br/>
Enter output text here:<br/>
<textarea id="output" rows="10" cols="60"></textarea><br/><br/>
<button id="convert" onClick="doStrip()">
Strip Vowels
</button>
JS/JQuery
function stripVowels(rawString)
{
var newString = '';
for(j=0; j<rawString.length; j++) {
if(rawString.charCodeAt(j)<1425
|| rawString.charCodeAt(j)>1479)
{ newString = newString + rawString.charAt(j); }
}
return(newString);
}
/* #shimondoodkin suggested even a much shorter way to do this */
function stripVowels2(rawString) {
return rawString.replace(/[\u0591-\u05C7]/g,"")
}
function doStrip() {
var input = $('#input').val();
var output = stripVowels(input);
$('#output').val(output);
}
link to Fiddle editor
example text (copied from book, seems pdf js wrong render spaces): לּעַ , עִ גוּוֵּ ן, רִ בָּ רָ ה, מַ לְ בׁ: מְ צֻ לָ ע, צֶ לַ ע, קָ דְ קֹד, זָ וִ ית יְ שָ ג ִ י םׂמֻ ש
hope when I will change characters with dots into characters without dots
in rendering function - it will solve this issue
I also try to change SPACE_FACTOR, but still have issues
in file evaluator.js
in function buildTextContentItem
do what you needed with variable "glyphUnicode"
I am creating a song book app using phonegap. In index.html i have list of songs in li tags. when i click on a particular song it will open that particular song's lyrics in another local html file.
I want to add a 'favourite button'. When the favourite button is clicked I want that particular song to be added to the favourites list. When user open the favourite page it should display list of their favourite songs, and when they click a song in favourite page it should open that particular song's lyrics html page.
I am an intermediate user of HTML and a beginner in JavaScript.
Please help me accomplish this,
Thanks in advance.
Because this is a 'pretty broad' question, it is hard to find an answer for this, but I'd suggest making an array, storing the favorite songs into it, then when you open the favorites.html page, it gets the array, and writes the information to the page.
e.g. when a favorite button is clicked on a song page, it writes: the name of the song(exampleSong), the page of the song(exampleSong.html), and other random details that you need, and going to the favorites.html should get a document ready function that reads the array and writes the page.
Sorry if I can't help that much, but this was a really broad question.
If you need help, here are some examples that I created
(This gets the array of favorites, and prints them out)
var favorites = [
["ExampleSong", "exampleSong.html"],
["LorddirtCoolSong", "LorddirtCoolSong.html"],
["StackOverflowIsAwesome", "StackOverflowIsAwesome.html"]
];
var containerA = document.getElementById("favoritesA");
for (var i in favorites)
{
for (var j in favorites[i])
{
var newElement = document.createElement("p");
newElement.innerHTML = favorites[i][j];
containerA.appendChild(newElement);
}
}
var containerB = document.getElementById("favoritesB");
for (var i in favorites)
{
var newElement = document.createElement("p");
newElement.innerHTML = "<h4>Favorite Song " + i + "</h4>";
containerB.appendChild(newElement);
for (var j in favorites[i])
{
var newElement = document.createElement("p");
newElement.innerHTML = favorites[i][j];
containerB.appendChild(newElement);
}
}
var containerC = document.getElementById("favoritesC");
for (var i in favorites)
{
var newElement = document.createElement("p");
newElement.innerHTML = "<h4>Favorite Song " + i + "</h4>";
containerC.appendChild(newElement);
for (var j in favorites[i])
{
if(j == 1){
}else{
var newElement = document.createElement("p");
newElement.innerHTML = "<a href='" + favorites[i][1] + "'>" + favorites[i][j] + "</a>";
containerC.appendChild(newElement);
}
}
}
.favoriteSongs{
border: 2px solid black;
display: block;
}
<!--
EXAMPLE 1A: Print out the Favorites
-->
<hr>
<h2>Example 1A: Print favorites out</h2>
<div id='favoritesA' class='favorites'>
</div>
<hr>
<!--
EXAMPLE 1B: Now you know the order of the songs!
-->
<h2>Example 1B: Print favorites out with formatting</h2>
<div id='favoritesB' class='favorites'>
</div>
<hr>
<!--
EXAMPLE 1C: Link them
-->
<h2>Example 1C: Link to the page</h2>
<div id='favoritesC' class='favorites'>
</div>
<hr>
Very self explanatory, it gets the array of favorite songs, with the name and url, gets the container, which is <div id='favorites'></div> and writes the contents into it.
(oh wait, i just noticed I spent so long working on this hahaha.)
Examples:
1A: All I did was search the array favorites, and print out every single thing in the array. Simple.
1B: Slightly different, it's the same as the last, but I added a <h4> tag before every array in the array. (Yes, arrays inside arrays inside arrays are confusing).
1C: Instead of printing out both of the arrays inside the arrays, just print out the first thing inside the arrays in the arrays, and add a link pointing to the second thing inside the arrays in the arrays. Confused already? Just read it through and you'll understand.
Hi I found a solution using another SO question.
First we will create a local storage and store song details in that local storage key.
then we will retrieve that information in favorite.html using localStorage.getItem(key);
The following is my code for first song song1.html
when button pressed song link will be appended to local storage
<!DOCTYPE html>
<html>
<body onload="mySong()">
<button onclick="mySongOne()">add to favorite</button>
<script>
function mySong() {
localStorage.setItem("favsong", "");
}
function appendToStorage(name, data){
var old = localStorage.getItem(name);
if(old === null) old = "";
localStorage.setItem(name, old + data);
}
function mySongOne() {
appendToStorage("favsong", "<a href='https://www.song1.com'><h1>song1</h1></a>");
}
</script>
</body>
</html>
for another song song2.html
when button pressed second song link will be appended to local storage
<!DOCTYPE html>
<html>
<body>
<button onclick="mySongTwo()">add to favorite</button>
<script>
function appendToStorage(name, data){
var old = localStorage.getItem(name);
if(old === null) old = "";
localStorage.setItem(name, old + data);
}
function mySongTwo() {
appendToStorage("favsong", "<a href='https://song2.com'><h1>song2</h1></a>");
}
</script>
</body>
</html>
and favorite.html
on page load it will show details from local storage
<!DOCTYPE html>
<html>
<body onload="yourFunction()">
<div id="result"></div>
<script>
function yourFunction() {
document.getElementById("result").innerHTML = localStorage.getItem("favsong");
}
</script>
</body>
</html>
I am trying to get a better hang of doing this and have been playing around with strings. What I am trying to do is collect a user input as a string and manipulate it so that when I display the text, whatever they wrote would be first displayed in all lower case, then all uppercase, then all of the text divided into its own line.
So, the output would be like this if I enter: This is an example
this is an example
THIS IS AN EXAMPLE
This
is
an
example
I feel like this is supposed to be a lot easier than it looks, but I am trying to do an all lowercase so far, but cannot get that to work so far (as well as the other two parts). I think that if I get the lowercase right, I just repeat the same thing for uppercase and splitting it.
<button onclick="myFunction()">Try it</button>
<p id="test"></p>
<script>
function myFunction() {
var person = prompt("Please enter a phrase");
if (person != null) {
document.getElementById("test").innerHTML =
test.toLowerCase;
document.getElementById("test").innerHTML =
test.toUpperCase;
document.getElementById("test").innerHTML =
test.split("\n");
}
}
</script>
The above is what I am playing with so far, I get undefined when I click the button to test it. Can someone help me edit this?
functions are invoked using ()
your variable is person not test
you want to split on space not \n
you want to ADD to test innerHTML, not replace it each time
to get line breaks in HTML, use <br> tag
I've gone for code that assigns innerHTML once, as this is more performant than adding to it a bit at a time - of course, with such a simple example there's no perceived difference, however I thought I should mention why I chose to use this odd methodology
function myFunction() {
var person = prompt("Please enter a phrase");
if (person != null) {
document.getElementById("test").innerHTML = [
person.toLowerCase(),
person.toUpperCase(),
person.split(" ").join('<br>')
].join("<br>");
}
}
<button onclick="myFunction()">Try it</button>
<p id="test"></p>
You may want to split the string into words first and use join() function with <br /> tags to render them into multiple lines of words.
function myFunction() {
var person = prompt("Please enter a phrase");
if (person != null) {
document.getElementById("test").innerHTML +=
person.toLowerCase() + "<br />";
document.getElementById("test").innerHTML +=
person.toUpperCase() + "<br />";
document.getElementById("test").innerHTML +=
person.split(' ').join('<br />');
}
}
I am new in Javascripting language.
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.
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 CODE
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 input Array, but unable to show on the web page. Need help please.
Tell me one more thing there is one code on given link. It also not gives desired answer. Please help me overcome from this problem.
<html>
<body>
<script>
function addValue(a) {
var element1 = document.createElement('tr');
var element2 = document.createElement('td');
var text = document.createTextNode(a);
var table = document.getElementById('t');
element2.appendChild(text);
element1.appendChild(element2);
table.tBodies(0).appendChild(element1);
}
</script>
Name: <input type="text" name="a">
<input type="button" value="Add" onClick='javascript:addValue(a.value)'>
<table id="t" border="1">
<tr><th>Employee Name</th></tr>
</table>
</body>
</html>
In your code where you push an item to the end of your input array, you're trying to push the array instead of the value to the array. So if your problem is that your values aren't being appended to the page is because you're trying to append the array that's empty initially onto itself.
So instead of
input.push(input);
It should be
input.push(s);
Since "s" you already declared to be the value from the text field.
And if you're not going to use that parameter you're passing in, I would get rid of it.
References: Javascript Array.Push()