I'm trying to get a specific out put based on what is in the textbox

Question

I'm trying to get a specific out put based on what is in the text box, with java script but all the code I'm using only works for numbers not with "text". When I replace the numbers with "text" it outputs no matter whats in the text box.

 <!DOCTYPE html>
 <html>
   <body>
     <imput id="x"value=""/>
     <button on Click="myFunction():">Try it</button>
     <p id="demo"></p>
     <script>
       function myFunction() {
         var qpw = "eighteen";
         var w = (qpw = "eighteen") ? "dieciocho":"no caps";
         document.getElementByld("demo").innerHTML = w + "";
       }
     </script>
     <script>
       function myFunction() {
         var qpe = "blue";
         var e = (qpe = "blue") ? "azul":"no caps";
         document.getElementByld("demo").innerHTML = e + "";
       }
     </script>
   </body>
 </html>

Use `==` or `===` instead of `=` in your ternary, example `(qpw == "eighteen") ?`... — Daniel, May 08 '15 at 13:30
Can you review the javascript code you posted ? It contains the same function ( myFunction defined twice ) + a DOM tag called imput ( most likely you meant input ) any other things you want to review ? — , May 08 '15 at 13:59

score 0 · Accepted Answer · edited May 23 '17 at 12:06

You are attempting to use the wrong equals sign for boolean logic:

var w = (qpw = "eighteen") ? "dieciocho":"no caps";

should be:

var w = (qpw == "eighteen") ? "dieciocho":"no caps";

or more, appropriately:

var w = (qpw === "eighteen") ? "dieciocho":"no caps";

Here is a full explanation on the usage of the equals: Does it matter which equals operator (== vs ===) I use in JavaScript comparisons?

There are a number of typos in your code that, I assume, are just simple mistakes, I put together a fiddle of your issue and solution.

I removed the inline javascript declaration from your html and added an id to the button:

<input id="x"value=""/>
 <button id="btn">Try it</button>
 <p id="demo"></p>

I then set the click event handler in javascript to the button:

document.getElementById('btn').onclick = myFunction;

I then removed the double functions and created one single function that checks against the user input:

function myFunction() {
    var userData = document.getElementById('x').value;
   var qpe = "blue";
    var qpw = "eighteen";
    var e = (userData == qpe) ? "azul": (userData == qpw)? "dieciocho" :"no caps";
   document.getElementById("demo").innerHTML = e + "";
 }

Andreas Louv · Answer 2 · 2015-05-08T13:35:38.410

You have multiply errors in your code:

First of all:

<button on Click="myFunction():">Try it</button>

Should have been: (See the attribute name and the colon->semicolon)

<button onclick="myFunction();">Try it</button>

Secondly you cannot define two functions with the same name, the last will simply just override the first defined one... Which means all of this code is not used:

 <script>
 function myFunction() {
   var qpw = "eighteen";
   var w = (qpw = "eighteen") ? "dieciocho":"no caps";
   document.getElementByld("demo").innerHTML = w + "";
 }
 </script>

Thirdly you one line if statement is wrong:

var e = (qpe = "blue") ? "azul":"no caps";

Should have been: (two equal signs are used for loose comparison (Three equal signs are used for strict comparison. For instance "1" == 1 but "1" !== 1))

var e = (qpe == "blue") ? "azul":"no caps";

Also there is not html element called <imput> I think you meant <input>:

<input id="x"value=""/>

I'm trying to get a specific out put based on what is in the textbox

2 Answers2