Javascript：与“，”的串联不起作用

Question

<button onclick="rzut()" />
<div id="wynik" />
<script type="text/javascript">

function rzut() {
document.getElementById("wynik").innerHTML = "Wynik to",Math.floor(Math.random()*6)+1;
}
</script>

For an unknown reason my script show only "Wynik to" and it skips the next part (math.floor etc)

Answer 1

Okay, let's go over some basics.

The first thing I would like to bring up is the concept of an Overloaded Operator . An overloaded operator, in short, is an operator that has different behaviour for different operands . An example of an overloaded operator in Javascript is + . For example:

var x = 4 + 4;
// x = 8

As you can see, adding two numeric values has the effect of summing the fields. But what about..

var x = "4" + "4";
// x = "44";

Well, because the types are strings, it behaves differently, hence it has an overloaded behaviour .

The + symbol will summate numeric values, but concatenate string values.

Bringing this forward to your example, you want to end up with a string value like..

"Wynik to,3"

Where 3 can vary. So let's look at it like this..

"Wynik to,X" 

where X is some variable. Well.. this means you've got to build the string on the fly.. So following your approach (and not using some of the nice ES6 features that have been introduced), you can use our friendly overloaded + to accomplish this..

"Wynik to," + X

Where X is some random number between 1 and 6 therefore..

"Wynik to " + (Math.floor(Math.random()*6)+1);

So you'll see here, we've got a numeric value on the right hand side and a string value on the left hand side.

What Javascript does in this situation is what's known as arithmetic promotion , where all operands are promoted to the precision of the highest operand.

In this case, the right hand side of the equation is promoted to a string. Then, as we've seen above, our overloaded operator knows what to do with two strings.