Targeting a Javascript solution

Asked

Viewed 32 times

-3

Hello, good morning guys!

I’m a beginner in javascript and would like to know what I can use in javascript to solve the following solution:

In a text when clicking on any word I have the option of four colors to color it.

Thank you!

javascript
  • 1

    The short answer is yes.

  • 1

    Basically events and manipulation of the DOM. With the event you will know when the text is clicked, with the manipulation of the DOM you will be able to display the color options and color the text. Good luck.

1 answer

0


This, example I created for you is fine, simple, probably what you want.

<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  
    #mysection {
      width: 600px;
      font-family: sans-serif;
      padding: 50px;
      margin: auto;
    }

    #mytitle {
      text-align: center;
    }

    #myparagraph {
      text-align: justify;
    }

    #mycolor {
      width: 133px;
      height: 27px;
      display: none;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    #mycolor > div {
      width: 25px;
      height: 25px;
      border: 1px solid black;
      float: left;
    }

    #black {
      background-color: black;
    }

    #red {
      background-color: red;
    }

    #green {
      background-color: green;
    }

    #yellow {
      background-color: yellow;
    }

    #exit {
      width: 25px;
      height: 27px;
    }
  
  </style>
</head>
<body>
  
<section id="mysection">
  <h1 id="mytitle">JavaScript</h1>
  <p id="myparagraph">
    JavaScript, frequentemente abreviado como JS, é uma linguagem de programação interpretada de alto nível, caracterizada também, 
    como dinâmica, fracamente tipada, prototype-based e multi-paradigma.[2] Juntamente com HTML e CSS, o JavaScript é uma das três
    principais tecnologias da World Wide Web. <a href="https://pt.wikipedia.org/wiki/JavaScript">Winkipedia</a>
  </p>
</section>

<div id="mycolor">
  <div id="black"></div>
  <div id="red"></div>
  <div id="green"></div>
  <div id="yellow"></div>
  <button id="exit" type="button">X</button>
</div>

<script>

var p = window.document.querySelector("#myparagraph");
var myColor = window.document.querySelector("#mycolor");

var black = window.document.querySelector("#black");
var red = window.document.querySelector("#red");
var green = window.document.querySelector("#green");
var yellow = window.document.querySelector("#yellow");
var exit = window.document.querySelector("#exit");

p.addEventListener("click", function() {
  myColor.style.display = "block";
});

black.addEventListener("click", function() {
  p.style.color = "black";
});

red.addEventListener("click", function() {
  p.style.color = "red";
});

green.addEventListener("click", function() {
  p.style.color = "green";
});

yellow.addEventListener("click", function() {
  p.style.color = "yellow";
});

exit.addEventListener("click", function() {
  myColor.style.display = "none";
});

</script>

</body>
</html>

well, in the javascript part I declared several variables p, myColor, black, red, green, yellow, exit. Each of these variables has a value, this value is nothing less than a reference to the names id html. This is the same as selecting an element in css and then applying properties to it. then each of these variables p, black, red, green, yellow, exit. Receive an event using the addEventListener() this event is a click event or when you click on the element. Then when the click event occurs it will fire a function(){} which is an anonymous function (a function that has no name) you could call a named function(with name) but did not, because otherwise the code would look great. Within the function has the appropriate codes to be executed, in the p he has myColor.style.display = "block"; namely the div with id="mycolor" html will be in the format of block she will appear, since in css nois we leave her as display: none. Then in the black you have p.style.color = "black"; or if the paragraph turns black and it happens too with red, green, yellow, only the colors are different and lastly in the exit, has myColor.style.display = "none"; namely our div who owns the id="mycolor" disappear when I click on button with the id="exit".

  • Thank you very much Leandro. I will join your help with what I am researching and realize what I am trying to do. 0/

  • 1

    No friend I hope to have helped!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.