How do I properly count the amount of replaced strings in Javascript. my increment function is in the replacement part of replace function bellow gives me a "0". i am not sure if the problem lies with the function or the way i called it. thanks in advance
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br/><br/>
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br/><br/>
Replace:<br />
<input type="text" id="replace" name="replace"size="30"><br />
<br/><br/>
<button onclick="newrep()">Find and Replace</button>
<br/><br/>
</main>
<script>
function newrep(){
let temp= document.getElementById("message").value;
var fid = document.getElementById('find').value;
var regexp=new RegExp(fid, "gi");
var rv = document.getElementById('replace').value;
var inp=document.getElementById('message').value;
var count=0;
let str2=(inp.replace(regexp,rv,function(x){count+=1;return"1"}))
document.getElementById("message").value = str2;
document.getElementById("ChCtr").innerHTML = count;
}
</script>
</body>
</html>
you are using replace function in wrong way . there is only two arguments allowed for this
one = search term
two = string or function
if you are using function for replace value then you have to return whatever value you wanted to replace into that function and thats it
function newrep(){
let temp= document.getElementById("message").value;
var fid = document.getElementById('find').value;
var regexp=new RegExp(fid, "gi");
var rv = document.getElementById('replace').value;
var inp=document.getElementById('message').value;
var count=0;
let str2=inp.replace(regexp,x => {
count++;
return rv;
})
document.getElementById("message").value = str2;
document.getElementById("ChCtr").innerHTML = count;
}
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br/><br/>
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br/><br/>
Replace:<br />
<input type="text" id="replace" name="replace"size="30"><br />
<br/><br/>
<button onclick="newrep()">Find and Replace</button>
<br/><br/>
</main>
</body>
</html>
This will work for you. Cheers :)
function newrep() {
let temp = document.getElementById("message").value;
var fid = document.getElementById("find").value;
var regexp = new RegExp(fid, "gi");
var rv = document.getElementById("replace").value;
var inp = document.getElementById("message").value;
var count = 0;
// Additional condition, when find is empty
if (!fid) {
document.getElementById("ChCtr").innerHTML = count;
return;
}
// corrected your useage of replace function
let str2 = inp.replace(regexp, function () {
count += 1;
return rv;
});
update(str2, count);
}
function update(msg, count) {
document.getElementById("message").value = msg;
document.getElementById("ChCtr").innerHTML = count;
}
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br /><br />
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br /><br />
Replace:<br />
<input type="text" id="replace" name="replace" size="30"><br />
<br /><br />
<button onclick="newrep()">Find and Replace</button>
<br /><br />
</main>
</body>
</html>
Related
Hello I have a problem with such a task I totally don't know how to get down to it, I hope someone will help me to write an application allowing to calculate the sum and the difference of two 2-dimensional numerical tables. Each of these tables should have 2 lines and 3 columns. Input data - the values of individual array elements - enter the keypads. Present the results on screen, on the same website.
My code is below:
<!DOCTYPE html>
<html lang="pl">
<head>
<title> JavaScript: tablice 2-wymiarowe. </title>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
Podaj 12 liczb <br />
Pierwsza: <input id="input1" type="text" value="1" /><br />
Druga: <input id="input2" type="text" value="2" /><br />
Trzecia: <input id="input3" type="text" value="3" /><br />
Czwarta: <input id="input4" type="text" value="4" /><br />
piata: <input id="input5" type="text" value="5" /><br />
szosta: <input id="input6" type="text" value="6" /><br />
</form>
<button onclick="przetwarzanie();"> Oblicz </button>
<div id="div1"> </div>
<script>
function przetwarzanie() {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var input4 = document.getElementById("input4");
var input5 = document.getElementById("input5");
var input6 = document.getElementById("input6");
var div1 = document.getElementById("div1");
var tablica = [];
tablica[0] = Number(input1.value, input2.value, input3.value);
tablica[1] = Number(input4.value, input5.value, input6.value);
suma = tablica[0] + tablica[1];
}
document.getElementById("div1").innerHTML = "Suma = " + suma;
</script>
</body>
</html>
First of all the last line of your script is outside the function while it uses a variable that is inside, this will not work but can easily be fixed by moving the line inside the function.
The second issue is that Number converts a string to a number. It does not sum them up. Instead move each input value to it's own Number function and add them together with the + sign.
For the difference in the two numbers you can just subtract one from the other. With Math.abs() we turn the number into a positive. This way we don't need to think about which of the two numbers is higher.
<!DOCTYPE html>
<html lang="pl">
<head>
<title> JavaScript: tablice 2-wymiarowe. </title>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
Podaj 12 liczb <br />
Pierwsza: <input id="input1" type="text" value="1" /><br />
Druga: <input id="input2" type="text" value="2" /><br />
Trzecia: <input id="input3" type="text" value="3" /><br />
Czwarta: <input id="input4" type="text" value="4" /><br />
piata: <input id="input5" type="text" value="5" /><br />
szosta: <input id="input6" type="text" value="6" /><br />
</form>
<button onclick="przetwarzanie();"> Oblicz </button>
<div id="div1"> </div>
<div id="div2"> </div>
<script>
function przetwarzanie() {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var input4 = document.getElementById("input4");
var input5 = document.getElementById("input5");
var input6 = document.getElementById("input6");
var div1 = document.getElementById("div1");
var tablica = [];
tablica[0] = Number(input1.value) + Number(input2.value) + Number(input3.value);
tablica[1] = Number(input4.value) + Number(input5.value) + Number(input6.value);
var suma = tablica[0] + tablica[1];
var roznica = Math.abs(tablica[0] - tablica[1]);
document.getElementById("div1").innerHTML = "Suma = " + suma;
document.getElementById("div2").innerHTML = "Różnica = " + roznica;
}
</script>
</body>
</html>
Suma undefined means you never created a variable and then you used it which caused the error below code is working just put all your code inside onclick function so when clicked it calculates and add it to html.
<!DOCTYPE html>
<html lang="pl">
<head>
<title> JavaScript: tablice 2-wymiarowe. </title>
<meta charset="UTF-8">
</head>
<body>
<form id="form1">
Podaj 12 liczb <br />
Pierwsza: <input id="input1" type="text" value="1" /><br />
Druga: <input id="input2" type="text" value="2" /><br />
Trzecia: <input id="input3" type="text" value="3" /><br />
Czwarta: <input id="input4" type="text" value="4" /><br />
piata: <input id="input5" type="text" value="5" /><br />
szosta: <input id="input6" type="text" value="6" /><br />
</form>
<button onclick="przetwarzanie();"> Oblicz </button>
<div id="div1"> </div>
<script>
function przetwarzanie() {
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");
var input3 = document.getElementById("input3");
var input4 = document.getElementById("input4");
var input5 = document.getElementById("input5");
var input6 = document.getElementById("input6");
var div1 = document.getElementById("div1");
var tablica = [];
tablica[0] = Number(input1.value, input2.value, input3.value);
tablica[1] = Number(input4.value, input5.value, input6.value);
let suma = tablica[0] + tablica[1];
document.getElementById("div1").innerHTML = "Suma = " + suma;
}
</script>
</body>
</html>
Im Trying to put the Value of dtpFrom to var FDate
I know my Javascript is wrong. I provided them so that you may know what I need to do.
var FDate = "";
var TDate = "";
<script>
function myFunction() {
document.getElementById("FDate").value = document.getElementById("dtpFrom").value;
document.getElementById("TDate").value = document.getElementById("dtpTo").value;
}
</script>
<p>
<strong><b>Find by MAWB: #Html.TextBox("searchstring")</b></strong>
<strong><b>From: #Html.TextBox("fromDate", FDate)</b></strong>
<strong><b>To: #Html.TextBox("toDate", TDate)</b></strong>
<input type="Date" id="dtpFrom" onchange="myFunction()" />
<input type="Date" id="dtpTo" />
<input type="submit" value="Search" />
</p>
https://jsfiddle.net/0zfjy75r/1/
var FDate = "<span id="FDate"></span>";
var TDate = "<span id="TDate"></span>";
<script>
function myFunction() {
document.getElementById("FDate").innerHTML = document.getElementById("dtpFrom").value;
document.getElementById("TDate").innerHTML = document.getElementById("dtpTo").value;
}
</script>
<p>
<strong><b>Find by MAWB: #Html.TextBox("searchstring")</b></strong>
<strong><b>From: #Html.TextBox("fromDate", FDate)</b></strong>
<strong><b>To: #Html.TextBox("toDate", TDate)</b></strong><br>
<input type="Date" id="dtpFrom" onchange="myFunction()" />
<input type="Date" id="dtpTo" />
<input type="submit" value="Search" />
</p>
how do i grab a value from an input element in javascript? For some reason my code is not executing. This is my HTML code:
<section id ="my-life" style="margin-left:39em;">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
This is my javascript code:
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello" + Niche[0].value;
}
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello " + Niche[0].value;
}
<input class="jenny" placeholder="Your First Name"/>
<br /><br />
<button onclick='buttonClicked();'>Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<section id ="my-life" style="margin-left:39em;">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<script>
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello" + Niche[0].value;
}
document.getElementById('get').onclick = buttonClicked;
</script>
I tried your code on the editor. It works fine. But you must include your JS code inside a <script> element. And put it in the bottom of the document.
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello " + Niche[0].value;
}
<section id ="my-life">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get" onclick="buttonClicked()">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<br/>
</section>
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8"/>
<title> Exercise 1</title>
<style>
body {
background-image: url("http://www.millionglitters.com/background/thumb/nice/nice-background-pattern-176.gif");
}
label { display : inline-block;
width :140px;
text-align:left;
padding-top:10px;
}
</style>
<script>
function con(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res = str1.concat(" "+str2);
alert(res);
}
function sub(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res1 = str1.substr(1,4);
var res2 = str2.substr(1,4);
alert(res1+" "+res2);
}
function last(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var str3=document.getElementById("str3").value;
var res = str1.concat(" "+str2);
var n=res.lastIndexOf(str3);
alert(n);
}
function lower(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res = str1.concat(" "+str2);
var res2=res.toLowerCase();
alert(res2);
}
function upper(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var res = str1.concat(" "+str2);
var res2=res.toUpperCase();
alert(res2);
}
function match(){
var str1=document.getElementById("str1").value;
var str2=document.getElementById("str2").value;
var str4=document.getElementById("str4").value;
var res = str1.concat(" "+str2);
var res2=res.match(str4);
alert(res2);
}
</script>
</head>
<body>
<h1>String processing Based on methods</h1>
<p><b>concat()</b>
used to join two or more strings.This method does not change
the existing strings, but returns a new string containing the text
of the joined strings.</p>
<p><b>substr()</b>
extracts parts of a string, beginning at the character at the
specified position, and returns the specified number of characters.</p>
<p><b>lastIndexOf()</b>
method returns the position of the last occurrence of a specified
value in a string. This method is case sensitive</p>
<p><b>toLowerCase()</b>
method converts a string to lowercase letters.</p>
<p><b>toUpperCase()</b>
method converts a string to uppercase letters.</p>
<p><b>match()</b>
searches a string for a match against a regular expression, and returns
the matches, as an Array object.</p>
<form>
<fieldset>
<legend><i>Input String</i></legend>
<label for ="str1">Input first Sentence</label>
<input type="text" id="str1" size="25" required><br />
<label for ="str2">Input second Sentence</label>
<input type="text" id="str2" size="25" required><br />
<p><b>The input field below is use for CERTAIN method only</b></p>
<label for ="str3">Choose from sentence a last word</label>
<input type="text" id="str3" size="25" required
placeholder="for lastIndexOf()"><br />
<label for ="str4">Choose a regular expression</label>
<input type="text" id="str4" size="25" required
placeholder="for match()"><br />
<label for ="str5">A word to replace/ Where</label>
<input type="text" id="str5" size="25" required
placeholder="Replace Word, replace()">
<input type="text" id="str6" size="25" required
placeholder="What word to replace, replace()"><br /><br />
<button type="button" onclick="con()">concat()</button>
<button type="button" onclick="sub()">substr()</button>
<button type="button" onclick="last()">lastIndexOf()</button>
<button type="button" onclick="lower()">toLowerCase()</button>
<button type="button" onclick="upper()">toUpperCase()</button>
<button type="button" onclick="match()">match()</button>
<button type="button" onclick="replace()">replace()</button>
<button type="button" onclick="split()">split()</button>
<button type="button" onclick="charCodeAt()">charCodeAt()</button>
<button type="button" onclick="slice()">slice()</button>
</fieldset>
</form>
</body>
</html>
I'm planning to write the codes of all JavaScript method as above. It is a good behavior of writing the codes like this?. I'm thinking why don't i put all method in one function. Is that possible?
Just asking...and I'm a beginner. Thanks for helping
I am trying to show forms according to user input in the text box but it is showing it one time only...please help...
index.html:
<html>
<head>
<script type="text/javascript" src="demo1.js"></script>
</head>
<body>
<form name="su">
<input type="text" name="tt" onkeyup="javascript:toggleFormVisibility();" id="sub"/> </a>
</form>
<form id="subscribe_frm" style="display:none">
NAME:<input type="text" name="text">
EMAIL:<input type="text" name="text">
PASSWORD:<input type="text" name="text">
</form>
demo.js:
function toggleFormVisibility()
{
var txt = document.getElementById('sub').value;
for(var i=0;i<txt;i++)
{
var frm_element = document.getElementById('subscribe_frm');
var vis = frm_element.style;
vis.display = 'block';
}
}
A bit of a guess, but I think you are trying to create multiple copies of your form. Try this out:
http://jsfiddle.net/QnrM9/
JS
function toggleFormVisibility() {
var txt = document.getElementById('sub').value;
var neededChildren = txt.length - document.getElementById('form_container').children.length + 1;
for (var i = 0; i < neededChildren; i++) {
var frm_element = document.getElementById('subscribe_frm').cloneNode(true);
var vis = frm_element.style;
vis['display'] = 'block';
document.getElementById("form_container").appendChild(frm_element);
}
}
document.getElementById('sub').addEventListener('keyup', toggleFormVisibility);
HTML
<form name="su">
<input type="text" name="tt" id="sub" />
</form>
<div id="form_container">
<form id="subscribe_frm" style="display:none">NAME:
<input type="text" name="text" />EMAIL:
<input type="text" name="text" />PASSWORD:
<input type="text" name="text" />
</form>
</div>