All geek questions in one place

Creating a JavaScript character selector

I am trying to make a character selector that selects each character separately each time the button is pressed. But it doesn't work at all

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>HELLO WORLD</title>
  </head>

  <body>
    <center>
      <br />
      <p id="temp">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
      <br />
      <input type="button" onclick="selector()" value="SELECT" />

      <script>

        var x = document.getElementById("temp").innerHTML;
        var i = 0;

        function selector() {
          x.charAt(i).style.backgroundColor = "red";
          i++;
        }

      </script>
    </center>
  </body>

</html>
Run code
+4
source share
3 answers

Here is one possible implementation

  • Create a list of characters in the HTML element with string#split.
  • Wrap each of these characters inside a span tag. This is easy to do with the function map. We want to check if they are alphabetic characters, so we use a function test.
  • . , span. , JavaScript .
  • . , , keydown, .
  • char. , document.querySelectorAll [index]
  • , , . , , .

var chars = document.getElementById("par").innerHTML.split('');

var wrapped = chars.map( c =>  /[a-z]/i.test(c) ? "<span class='char'>" + c + "</span>" : "").join('');
var numLetters = wrapped.replace(/<span class='char'>/g, '').replace(/<\/span>/g, '').length;

document.getElementById("par").innerHTML = wrapped;

var index = 0;
document.addEventListener("keydown", function() {
    document.querySelectorAll(".char")[index].style.color = "red";
    if (index == 0) {
        document.querySelectorAll(".char")[numLetters - 1].style.color = "black";
    }
    if (index > 0) {
        document.querySelectorAll(".char")[index - 1].style.color = "black";
    }
    index = index == numLetters - 1 ? 0 : index + 1
});
<p id="par">This is a paragraph</p>
+3

, HTML, , .

"undefined", ... backgroundColor ​​ undefined, style, .

, (), ( <span> - ), <span>.

, , , . . inline :

№1 ( )

// Get DOM reference to paragraph (not contents of paragraph)
var x = document.getElementById("temp");

// Get DOM reference to button so we can wire it up to 
// an event handler in JS (not via inline event handling attributes).
var btn = document.getElementById("btn");

// Set up event handler:
btn.addEventListener("click", selector);

var i = 0;

function selector() {
  
  // Get the character to be highlighted
  var char = x.textContent.charAt(i);
  
  // Set the contents of the paragraph to a new string that has the particular character
  // wrapped with a <span> that is set to use a predetermined class that does the actual
  // highlighting.
  x.innerHTML = x.textContent.replace(char, "<span class='highlight'>" + char + "</span>");
  
  // Increment i until we've hit the 26th value, then reset to 0
  i < 25 ? i++ : i = 0;
}
.highlight { background-color:red; }
<p id="temp">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<br>

<!-- There is no closing tag for input elements! -->
<input type="button" id="btn" value="SELECT">

№2 ( )

// Get DOM reference to paragraph (not contents of paragraph)
var x = document.getElementById("temp");

// Get DOM reference to button so we can wire it up to an event handler in JS (not via inline event 
// handling attributes).
var btn = document.getElementById("btn");

// Set up event handler:
btn.addEventListener("click", selector);

var i = 0;

function selector() {
  
  // Get the character to be highlighted
  var char = x.textContent.charAt(i);
  
  // Set the contents of the paragraph to a new string that encloses all the characters
  // up to and including the current one in  a <span> that is set to use a predetermined 
  // class that does the actual highlighting.
  x.innerHTML = "<span class='highlight'>" + x.textContent.replace(char, char + "</span>");
  
  // Increment i until we've hit the 26th value, then reset to 0
  i < 25 ? i++ : i = 0;
}
.highlight { background-color:red; }
<p id="temp">ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<br>

<!-- There is no closing tag for input elements! -->
<input type="button" id="btn" value="SELECT">
+5

You need to put the whole character in the span tag and change the background color of the range.

var i = 0;

function selector() {
  if (document.getElementById("temp_" + i)) 
    document.getElementById("temp_" + i).style.backgroundColor = "red";
  i++;
}
<p id="temp">
  <span id='temp_0'>A</span>
  <span id='temp_1'>B</span>
  <span id='temp_2'>C</span>
  <span id='temp_3'>D</span>
</p>

<button onclick='selector();'>Test</button>
Run code
+2
source

Source: https://habr.com/ru/post/1668278/

More articles:


All Articles