-3

Olá, bom dia galera!

Sou iniciante em javascript e gostaria de saber o que posso usar em javascript para resolver a seguinte solução:

Em um texto ao clicar em qualquer palavra eu tenha a opção de quatro cores para colorir ela.

Obrigado!

2
  • 1
    A resposta curta é sim.
    – Raizant
    Commented 4/07/2019 às 14:55
  • 1
    Basicamente eventos e manipulação do DOM. Com o evento você saberá quando o texto for clicado, com a manipulação do DOM você conseguirá exibir as opções de cor e colorir o texto. Boa sorte.
    – Woss
    Commented 4/07/2019 às 15:04

1 Resposta 1

0

Este, exemplo que eu criei para você é bem, simples, provalvemente é o que você quer.

<!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>

bom, na parte javascript eu declarei varias variáveis p, myColor, black, red, green, yellow, exit. Cada uma dessas variáveis tem um valor, este valor nada mais nada menos do que uma referência aos nomes id no html. Isso é o mesmo que selecionar um elemento no css e depois aplicar propriedades a ele. depois cada uma dessas variáveis p, black, red, green, yellow, exit. Recebem um evento usando o addEventListener() esse evento é um evento de click ou seja quando você clicar no elemento. Em seguida quando o evento de click ocorrer irar disparar um function(){} que é uma função anônima(uma função que não tem nome) você poderia chamar uma função nomeada(com nome) mais não o fiz, porque se não o código iria ficar bem grande. Dentro da função tem os devidos códigos a serem executados, no p ele tem myColor.style.display = "block"; ou seja a div com id="mycolor" no html irar ficar em formato de block ela irar aparecer, já que no css nois deixamos ela como display: none. Depois no black você tem p.style.color = "black"; ou sejá o parágrafo irar ficar preto e isso irar acontecer também com red, green, yellow, apenas as cores são diferentes e por ultimo no exit, tem myColor.style.display = "none"; ou seja a nossa div que possui o id="mycolor" irar desaparecer quando eu clicar no button com o id="exit".

2
  • Muito obrigado Leandro. Vou juntar sua ajuda com o que estou pesquisando e realizar o que estou tentando fazer. \0/ Commented 4/07/2019 às 17:42
  • 1
    De nada amigo espero ter ajudado! Commented 4/07/2019 às 18:23

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .