how to make user input on screen to reflect on click event (js, html)-CodePudding

I am trying to write html and js codes to make user input to change according to which button user clicks. For example, user enters find/replace values respectively and when they hit the replace button, the user input they initially typed in will change. below is my code which is not working at all..

var str = document.getElementById('text').value;
var f = document.getElementById('find').value;
var r = document.getElementById('replace').value;

let rep = str.replace(f, r);
document.getElementById('text').innerHTML = rep;

//

<button onclick="funcname()">Replace</button><br>

CodePudding user response：

You probably want to use replaceAll see docs

function replace() {
              
  var f = document.getElementById('find').value;
  var r = document.getElementById('replace').value
  var text = document.getElementById('text');
              
  text.textContent = text.textContent.replaceAll(f, r);
  return null;                                                                                                         
}

<div id="text">foo</div>
find <input id="find">
<div></>      
replace <input id="replace">
              
              
<button onclick="replace()">Replace</button><br>

CodePudding user response：

You need to create separate functions for what you are doing. Each button will call the functionality it desires.

Below, I have a paragraph with an id text. We can access it using document.getElementById or document.querySelector. Because it is a text element, we access the value using innerHTML.

For the input, we need an input element which has the id input. The value is accessed using value.

The replace is straight forward, set the innerHTML of the paragraph to the value of the input.

The find, not sure exactly what you wanted, but we can use string.includes() to find out whether the value in the input appears in the innerHTML of the paragraph.

Finally, there is find and replace, which can be solved with string.replace for replacing the first occurance, or you can change to string.replaceAll to replace all occurances.

const find = function() {
  let str = document.getElementById('text').innerHTML;
  let inp = document.getElementById('findInput').value;
  
  let matched = str.includes(inp) ? 'was' : 'was not';
  alert(`${inp} ${matched} found in the sentence.`);
};

const replace = function() {
  document.getElementById('text').innerHTML = document.getElementById('replaceInput').value;
};

const findAndReplace = function() {
  let str = document.getElementById('text').innerHTML;
  let f = document.getElementById('findInput').value;
  let r = document.getElementById('replaceInput').value;
  
  document.getElementById('text').innerHTML = str.replace(f, r);
};

<p id="text">She sells sea shells on the sea shore.</p>
<label for="findInput">Find:</label> <input id="findInput" type="text"><br>
<label for="replaceInput">Repalce:</label> <input id="replaceInput" type="text"><br>
<button type="button" onclick="find()">Find</button><br>
<button type="button" onclick="replace()">Replace</button><br>
<button type="button" onclick="findAndReplace()">Find and Replace</button><br>

CodePudding user response：

It looks like the issue is that replace() only replaces the first occurrence in the string, which is causing the issue.

There are two solutions for this issue, which are both very similar.

The first solution is to use String.replaceAll(). This is a new feature introduced in ES2021, which means that it doesn't support old browsers (e.g. Internet Explorer).

To use it, simply use the code below.

const rep = str.replaceAll(f, r); // This line has been modified
document.getElementById("text").innerHTML = rep;

It will use the new method (replaceAll()), which will replace all occurrences of f with r.

The second solution uses a similar, yet older function, called String.replace(). It is the same function that you are using, but we are going to use a different technique.

To replace all occurrences, you need to use RegExp to modify the behaviour.

Use the code below to replace all occurrences with replace().

const rep = str.replace(new RegExp(`${f}`, "g"), r); // This line has been modified
document.getElementById("text").innerHTML = rep;

This uses the new RegExp constructor to create a new RegExp instance. This is because we want to pass in a variable.

The second parameter is where the magic happens. The g means global. This makes the replace() method replace all of the occurrences.

In summary, both of these methods should work. Here are some circumstances of which one you should use.

Option 1: Use when targeting newer browsers, and are focused on readability.
Option 2: Use when targeting older browsers.

CodePudding user response：

try NOT to use , instead of . because js isnt defining , and also if that doesnt work then try using const replacer = document.querySelector("#text");..replace only replaces the first selected word so you should try .replaceAll instead

CodePudding user response：

try using the onclick event handler

var str = document.getElementById('text').value;
var f = document.getElementById('find').value;
var r = document.getElementById('replace').value;

let btn = document.querySelector('.btn')

let rep = str.replace(f, r);

btn.onclick = function () {
   document.getElementById('text').innerHTML = rep;
}

//

<button class='btn'>Replace</button><br>