Placing two functions within one

Asked

Viewed 274 times

3

I made a function that by clicking the button it changes the color of the text and background of a div

However, I had to do two lines of command. Is there any way to do everything in one line?

<body>
  <div id="texto">
        texto
   </div>
    <button onclick="mudarDiv()">ALTERANDO</button>
</body>

<script>
   function mudarDiv() {
      var div = document.getElementById('texto').innerHTML = 'teste'; /* MUDA O TEXTO  DA DIV PARA "TESTE" */
      document.getElementById('texto').style.background = "red"; /*MUDA O BACKGROUND DA DIV PARA VERMELHO*/
   }
</script>
javascript html encoding-style
  • 2

    "A single line" doesn’t mean much because I can make a huge code on one line.

  • 2

    And why you need this?

  • I expressed myself wrong. what I meant was that if it were possible in one command, to do these two things.

3 answers

13


Writing short code should not be a goal. Writing expressive and canonical codes should be something to be pursued. Trying to write everything in one line has nothing more expressive or canonical. Trying to write short code can make it less readable and less performatic. This is the opposite of DRY.

These are two completely different operations and do not have to try to do everything together, nor would it make sense from the logical point of view.

You could even create a generic function that you pass an object with the members that you want to manipulate and the values that you want to pass and make a loop that manipulates all the GIFT that you specified, but that’s not performative, it makes anything less readable, it’s a premature generalization, an exaggerated abstraction and probably leaking at the same time (a phenomenon), and in practice the call of the code will be more complex, and the code itself will have more lines, which only has disadvantages.

It’s even scary to suggest this because you might be tempted to do it, but I think it’s always good to talk about what you can do, maybe people look at it and get more creative, too bad in this case it’s creativity to do worse, but it gives ideas, something that people don’t have anymore, almost all copy formulas and create nothing.

These cases the function is very clear of what to do and in a very specific way, this form seems very adequate, except for a detail that can be discussed if it should be done, which would make the code shorter, more canonical (more DRY), although not so necessary and even more performative, all good, except you’ll have an extra line, which isn’t bad.

Interestingly you are concerned with fewer lines, but not with code organization which is much more important. Fewer lines are useful when these lines are unnecessary. Or any code that is unnecessary should not be there, for example this obsession that people have to create variable without need, this variable div makes no sense. But if you want to make the code more efficient and canonical as well as shorter, even if you have an extra line, then it would make sense to create a variable to store the element.

function mudarDiv() {
    var texto = document.getElementById('texto');
    texto.innerHTML = 'teste';
    texto.style.background = 'red';
}

I put in the Github for future reference.

The comments do not make the slightest sense because they are obvious and violate the DRY, even more in high box, and putting the comment is still making the code bigger without bringing advantages, in fact it only brings disadvantages. The quotation marks are inconsistent and although they cause no problem, it is more indicative that does not care about readability. You’re worrying about the wrong things.

Are you sure innerHTML is the best option for your case? I see people always using because they copy some example that had no context, but the impression I have is that almost always is the wrong mechanism to do what you want. I’m just questioning.

  • 1

    "for example this obsession that people have to create variable without need" - it seems that you are talking about the code block just below, where the variable makes sense (yourself who created rs). It might confuse some people, I think it would be better to cut the code snippet or explain better what it does there.

  • I improved that and some other things.

2

These are separate operations and, with what Javascript offers, you can’t (directly) perform both operations in one line.

However, there is a jQuery flame library that can help you decrease the size of your code by keeping it readable.

The code:

var texto = document.getElementById('texto');
texto.innerHTML = 'teste';
texto.style.background = 'red';

In jQuery would be:

$("#texto").html("teste").css("background", "red");

1

In addition to what was answered it would be interesting to pass the values as parameters, making the function reusable. For example:

 <body>
    <div id="texto">
        texto
    </div>
    <button onclick="mudarDiv('texto', 'teste', 'red')">ALTERANDO</button>
</body>

<script>
   function mudarDiv(elemento, novoTexto, novaCor) {
      var div = document.getElementById(elemento');
      texto.innerHTML = novoTexto';
      texto.style.background = novaCor';
   }
</script>

Browser other questions tagged javascript html encoding-style

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