I'm really newbie at Web Development and I'm trying to change the text of some inputs, with Javascript. Here is a example of what my code have to do
<!DOCTYPE html>
<html>
<body>
<p>Click the button to replace "R$" with "" in the field below:</p>
<input id="demo" value="R$ 1223,43"></input>
<input id="demo1" value="R$ 134523,67"></input>
<input id="demo2" value="R$ 12453,41"></input>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var x=document.getElementByTagName("input")
for(var i = 0; i < x.length; i++) {
var str=x[i].innerHTML;
var n=str.replace(",",".");
var n1 = n.replace("R$ ","");
document.getElementById("demo").innerHTML=n1;
}
}
</script>
</body>
</html>
So, I want to withdraw the "R$" and replace "," to "." for some math operations. And I have to do this with all inputs in my code.
You were nearly there, replacing a few things to make it look similar to this:
function myFunction() {
var x = document.getElementsByTagName("input"); // ; was missing and you used getElementByTagName instead of getElementsByTagName
for (var i = 0; i < x.length; i++) {
var str = x[i].value; // use .value
var n = str.replace(",", ".");
var n1 = n.replace("R$ ", "");
//document.getElementById("demo").innerHTML=n1; // use x[i] again instead
x[i].value = n1; // and again use .value
}
}
DEMO - Running updated code
These are the needed steps - at least step 1 through 3
moved the script to the head where it belongs
changed getElementByTagName to getElementsByTagName, plural
get and change x[i].value
chained the replace
DEMO
<!DOCTYPE html>
<html>
<head>
<title>Replace example</title>
<script>
function myFunction() {
var x=document.getElementsByTagName("input"); // plural
for(var i = 0; i < x.length; i++) {
var str=x[i].value;
x[i].value=str.replace(",",".").replace("R$ ","");
}
}
</script>
</head>
<body>
<p>Click the button to replace "R$" with "" in the field below:</p>
<input id="demo" value="R$ 1223,43"></input>
<input id="demo1" value="R$ 134523,67"></input>
<input id="demo2" value="R$ 12453,41"></input>
<button onclick="myFunction()">Try it</button>
</body>
</html>
First of all, use .value instead of .innerHTML. .innerHTML referes to text within the opening and closing of the tag.
Secondly, correct the spellings at var x=document.getElementByTagName("input")
it should be getElementsByTagName
this function should do what you want:
function myFunction()
{
var eles=document.getElementsByTagName("input");
for(var i = 0; i < eles.length; i++)
{
if(eles[i].type != 'text') continue; // inputs that aren't of type text dont make sense here
var str = eles[i].value;
str=str.replace(",",".");
str=str.replace("R$ ","");
eles[i].value=str;
}
}
Related
I'm a rookie. I try this example to test code that when click on each p ,the section text will replace by "yeah"
When click first p, first section is replaced
When click 2nd p, 2nd section is replaced ...
Code like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>p{text-align: center;}</style>
</head>
<body>
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
<script>
var x = document.getElementsByClassName("test")
var y = document.getElementsByTagName("section")
for(i=0;i<y.length;i++){
y[i].setAttribute("class","linktest")
}
var z = document.getElementsByClassName("linktest")
function place(a){
z[a-1].innerHTML="yeah"
}
for(i=0;i<x.length;i++){
x[i].addEventListener("click", function(){
place(i+1)})
}
</script>
</body>
</html>
how i wrong with for loop code of addEventListener
I try to write long code like this
x[0].addEventListener("click",function(){place(1)})
x[1].addEventListener("click",function(){place(2)})
x[2].addEventListener("click",function(){place(3)})
x[3].addEventListener("click",function(){place(4)})
x[4].addEventListener("click",function(){place(5)})
x[5].addEventListener("click",function(){place(6)})
And it worked but i want to short code because real work has mor than 100 items
Help plz
#Chaska's answer works fine but since you mentioned that there will be over 100 items it's important to avoid adding event listeners for each element for better performance. Instead wrap all the p tags in a div and add a single event listener to the div tag. Here is a slightly modified code.
var x = document.getElementsByClassName("test");
var y = document.getElementsByTagName("section");
for (i = 0; i < y.length; i++) {
//assuming equal no. of elements in x and y
y[i].setAttribute("class", "linktest");
x[i].setAttribute('data-index', i);
}
var z = document.getElementsByClassName("linktest");
function place(a) {
z[a].innerHTML = "yeah";
}
var testGroup = document.getElementById('test-group');
testGroup.addEventListener('click', function() {
place(parseInt(event.target.getAttribute('data-index')));
})
<div id="test-group">
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
</div>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
You are calling place() function out of the for loop. So the value of i will always be 6.
Try this way to assign the index to each element first and pass it to the place() function.
var x = document.getElementsByClassName("test");
var y = document.getElementsByTagName("section");
for (i = 0; i < y.length; i++) {
y[i].setAttribute("class", "linktest");
}
var z = document.getElementsByClassName("linktest");
function place(a) {
z[a].innerHTML = "yeah";
}
for (i = 0; i < x.length; i++) {
x[i].setAttribute('data-index', i);
x[i].addEventListener("click", function() {
place(parseInt(this.getAttribute('data-index')));
})
}
<p class="test">hello</p>
<p class="test">how</p>
<p class="test">are</p>
<p class="test">you</p>
<p class="test">today</p>
<p class="test">sir</p>
<section>good</section>
<section>great</section>
<section>excellent</section>
<section>well</section>
<section>best</section>
<section>better</section>
DISCLAIMER: i'm legit a newbie
I have a 2nd parameter in the getInput function, I should use it for the 9 zeros that I should input. But I don't know how to loop it to become 9 zeros instead of putting it in a variable.
How do I loop and store 9 zero's into my "digit" parameter without declaring it as var zr = "000000000"
here's my code:
<html>
<head>
<title>Search</title>
<script>
//This method does the processing
function getInput(input, digit){
var str=input.substring(0,input.length);
var padd0=9-str.length;
var zr="000000000";
var zrsub=zr.substring(0,padd0);
var output="A"+zrsub+""+str;
//can also be var output=input[0]+zrsub+""+str;
return output;
}
//Displays output
function showOutput(){
var input=document.getElementById("search-input").value;
var dislay=document.getElementById("search-output");
dislay.value=getInput(input);
}
</script>
</head>
<body>
<div class="wrapper">
<input type="text" id="search-input">
<input type="button" id="btn" value="ENTER" onclick="showOutput()"> <br><br>
<input type="text" id="search-output">
</div>
</body>
</html>
Sorry just a newbie in this whole programming thing. Just a little confused.
with for loop join string
function joinString(input,digit) {
var inputArr = input.split("");
// var n = 9; // the length of the ouput string;
for (var i = 0; i < digit; i++) {
inputArr.unshift(0);
if (inputArr.length === digit) {
return inputArr.join("");
}
}
}
console.log(joinString("123456"));
You can use padStart
function getInput(input, digit){
return 'A'+ input.toString().padStart(digit, '0');
}
document.getElementById('target').innerHTML = getInput(132,9)
<p id="target"></p>
IE may not support it though.
I am trying to figure out a way to count words that are placed in multiple paragraph blocks in javascript. Right now I have a button that is connected to a function and that function is linked to an ID in the paragraph. Here is my code
function processText(elements) {
var count = 0;
for (var i = 0; i < elements.length; i++) {
count += elements[i].textContent.split(/\s/).length;
}
return count;
}
var wordsInParagraphs = processText(document.getElementsByTagName("data"));
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="The Cask of Amontillado--Edgar Allan Poe (1809-1849)">
</head>
<body>
<p><button 1="processText(elements);">Process</button></p>
<p id="data"></p>
</body>
Is this what you're looking for? You just need to call the function on click and grab all the elements you want to count, you have the rest there (I'm using split instead of regex).
function processText() {
var elements = document.querySelectorAll(".data");
var count = 0;
for (var i = 0; i < elements.length; i++) {
count += elements[i].textContent.split(" ").length;
}
console.log(count)
}
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="The Cask of Amontillado--Edgar Allan Poe (1809-1849)">
</head>
<body>
<p><button onclick="processText();">Process</button></p>
<p class="data">text in paragraph one</p>
<p class="data">text in paragraph two</p>
</body>
The markup has some problems, for example, 1="processText(elements);" probably you meant onClick="processText(elements);", however, you're passing a param called elements. Further, you have a tag with id="data" and you're trying to look for tag name those elements.
A better approach is using the function addEventListener for a better logic and you should mark those paragraphs using a class name class="data". Finally, for splitting by spaces use this regex /\s+/
function processText(elements) {
var count = 0;
for (var i = 0; i < elements.length; i++) {
count += elements[i].textContent.split(/\s+/).length;
}
return count;
}
document.getElementById('myButton').addEventListener('click', function() {
var wordsInParagraphs = processText(document.getElementsByClassName("data"));
document.getElementById('total').textContent = wordsInParagraphs;
});
<p><button id='myButton'>Process</button></p>
<p class="data">Ele from Stack</p>
<p class="data">Ele from Venezuela</p>
<p id='total'></p>
I runs this Javascript code and get nodeType and nodeName without problem for the body.childNode. However, nodeValue fail to display.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get the node types of the body element's child nodes.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text is considered as nodes.</p>
<!-- My personal comment goes here.. -->
<div><strong>Note:</strong> Comments in the document are considered as comment nodes.</div>
<p id="demo"></p>
<script>
function myFunction() {
var c = document.body.childNodes;
var txt = "";
var i;
for (i = 0; i < c.length; i++) {
txt = txt + "notdType: "+ c[i].nodeType + " NodeName: "+c[i].nodeName+" NodeValue: "+c[i].nodeValue +"<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Element nodes don't have node values. Instead, they have child nodes of their own.
This question already has answers here:
Trim string in JavaScript
(20 answers)
Closed 9 years ago.
I need your help,
I can't seem to be able to strip away the whitespaces in my data string before adding them to my select box.
(BTW the spaces in between the data string are deliberate as I am working with an old dataset and slowly converting it to a non-space string)
How do you accomplish this? I thought that I had the logic all right:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function parseData() {
var data = "1234567, 8910111, 9632587,6541237,9631478, 1010232"
var options = data.split(",");
var select = document.getElementById('list')
select.innerHTML = ""
for(var i=0; i<options.length; i++)
select.options[i] = new Option(options[i], i);
}
</script>
</head>
<body>
<input type="button" value="load list" onclick="parseData()"/>
<br>
<select id="list"></select>
</body>
</html>
You can trim whitespaces when filling the selector:
options[i].replace(/^\s+|\s+$/g, '')
The jsfiddle is here.
No Regex required, use Options[i].trim() (trim removes any whitespace (including line breaks, tab stops and whatevs) on both sites of the string)
for(var i=0; i<options.length; i++)
select.options[i] = new Option(options[i].trim(), i);
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function parseData() {
var data = "1234567, 8910111, 9632587,6541237,9631478, 1010232"
var options = data.split(",");
var select = document.getElementById('list')
select.innerHTML = ""
for(var i=0; i<options.length; i++)
select.options[i] = new Option(options[i].replace(" ", ""), i); // cross browser
// or this one
//select.options[i] = new Option(options[i].trim(), i); // ie9+ and all other browsers
}
</script>
</head>
<body>
<input type="button" value="load list" onclick="parseData()"/>
<br>
<select id="list"></select>
</body>
</html>