Ternary statement logic problem.

@JMRKEROct 11.2015

Could someone explain why my logic is not working? ?

Clicking the PLUS symbol works as expected.

Clicking the MINUS symbol does NOT change with initial click
but works correctly everytime thereafter.
Am I not understanding the ‘ternary’ statement correctly?

Here’s the code

[code] <html> <head> <title>Character Toggle</title> <style type=”text/css”> .charReplace { font-size:3em; cursor:pointer; background-color:lime; width:1em; text-align:center; font-weight:bold; } </style> </head> <body> Image showed should toggle plus or minus after INITIAL click<p /> <div class=”charReplace” value=’+’ onclick=”swapChar(this)”>+</div><br>

<div class=”charReplace” value=’-‘ onclick=”swapChar(this)”>-</div><br>

<div class=”charReplace” value=’+’ onclick=”swapChar(this)”>+</div><br>

<div class=”charReplace” value=’-‘ onclick=”swapChar(this)”>-</div><br>

<div class=”charReplace” value=’+’ onclick=”swapChar(this)”>+</div><br>

<script type=”text/javascript”> function swapChar(info) { info.value = (info.value == ‘-‘) ? ‘+’ : ‘-‘; info.innerHTML = info.value; } </script>

</body> </html> [/code]

to post a comment

JavaScript

3 Comments(s) _↴

@xelawhoOct 11.2015 — #hello again, JMRKER.

DIVs aren't form fields, so don't naturally have value attributes in legal html. You can, however, hoist one on to them with js, which is exactly what your code is doing. Console log it and you will see that the first click on as div logs info.value as undefined and reports correctly thereafter.

You could set a data-* attribute, but really - unless your code is more complicated than what you are posting, why not just use the innerHTML?

Example below uses event delegation to get rid of the inline event handlers but I suspect you get the idea already...

[code=php]
 <body>
 Image showed should toggle plus or minus after INITIAL click<p />
 <div id="wrap">
 <div class="charReplace" >+</div><br>
 
 <div class="charReplace" >-</div><br>
 
 <div class="charReplace" >+</div><br>
 
 <div class="charReplace" >-</div><br>
 
 <div class="charReplace" >+</div><br>
 </div>
 <script type="text/javascript">
 document.getElementById("wrap").onclick=function(e){
 e = e || window.event;
 var targ = e.target || e.srcElement;
 if(targ.tagName.toUpperCase()==="DIV"){
 targ.innerHTML = targ.innerHTML=== '-'? '+' : '-';
 }
 }
 
 </script>
 
 </body>
 [/code]

@daveyerwinOct 11.2015 — #The difference between attributes and

properties is not well understood by

many otherwise competent programmers.

First try this code ...

[CODE]
 <html>
 <head>
 <title>Character Toggle</title>
 <style type="text/css">
 .charReplace { font-size:3em; cursor:pointer;
 background-color:lime; width:1em;
 text-align:center; font-weight:bold; }
 </style>
 </head>
 <body>
 Image showed should toggle plus or minus after INITIAL click<p />
 <div class="charReplace" onclick="swapChar(this)">+</div><br>
 
 <div class="charReplace" onclick="swapChar(this)">-</div><br>
 
 <div class="charReplace"  onclick="swapChar(this)">+</div><br>
 
 <div class="charReplace"  onclick="swapChar(this)">-</div><br>
 
 <div class="charReplace" onclick="swapChar(this)">+</div><br>
 
 <script type="text/javascript">
 function swapChar(info) {
 info.value = (info.value == '-') ? '+' : '-';
 info.innerHTML = info.value;
 }
 </script>
 
 </body>
 </html>
 [/CODE]

What your code is actually doing is creating

a new property ...

info.value = (info.value == '-') ? '+' : '-';

that line creates the property which is

not related to any html markup and is

undefined at the time the comparison

is made then it is set '-' because the

comparison failed.

The line

<div class="charReplace" value='+' onclick="swapChar(this)">+</div><br>

does not create a property, it creates an attribute.

So ...

[CODE]
 <html>
 <head>
 <title>Character Toggle</title>
 <style type="text/css">
 .charReplace { font-size:3em; cursor:pointer;
 background-color:lime; width:1em;
 text-align:center; font-weight:bold; }
 </style>
 </head>
 <body>
 Image showed should toggle plus or minus after INITIAL click<p />
 <div class="charReplace" value='+' onclick="swapChar(this)">+</div><br>
 
 <div class="charReplace" value='-' onclick="swapChar(this)">-</div><br>
 
 <div class="charReplace" value='+' onclick="swapChar(this)">+</div><br>
 
 <div class="charReplace" value='-' onclick="swapChar(this)">-</div><br>
 
 <div class="charReplace" value='+' onclick="swapChar(this)">+</div><br>
 
 <script type="text/javascript">
 
 function swapChar(info) {
 //alert( info.getAttribute("value") )
 //alert( info.value )
 var value = info.getAttribute("value")
 value = value == '-' ? '+' : '-';
 info.innerHTML = value;
 
 }
 </script>
 
 </body>
 </html>
 [/CODE]

@JMRKERauthorOct 13.2015 — #Thank you both for the code and the explanation.

Also in #JavaScript _↴

Need help on simple project (for SIMPLE guy!)Reading XML from Javascript how to know if there is internet connection

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

Ternary statement logic problem.

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Ternary statement logic problem.

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴