CODEWITHSUNDEEP
javascripthtmlcss
Kshitij Wahati
Kshitij Wahati

Reputation: 27

Trouble making a sign operator appear on a text box

When the ADD div is clicked, "+" should appear on the textbox. Same goes for SUBSTRACT, MULTIPLY and DIVIDE. I cannot make the operators display on the textbox. This is what I have got so far.

    <!DOCTYPE html>
    <html>
    <body>
    
    <div class="leftDiv">
    			<div id="colorblock">
    				<div id = "add" class = "blocks" onclick="displayOptr()">ADD</div>
    				<div id = "subtract" class = "blocks">SUBTRACT</div>
    				<div id = "multiply" class = "blocks">MULTIPLY</div>
    				<div id = "divide" class = "blocks">DIVIDE</div>
    			</div>
    		</div>
    <input type = "text" size="1" id = "operator">
    
    
    <script>
    function displayOptr() {
        var optrArr =["+","-","*","/"];
        for (var i = 0; i < optrArr.length; i++){
        	if (i==0){
            	document.getElementById("operator").value = "+";
            } else if (i==1){
            	document.getElementById("operator").value = "-";
            } else if (i==2){
            	document.getElementById("operator").value = "*";
            } else if (i==3){
            	document.getElementById("operator").value = "/";    
        }
        
        
    }
    </script>
    
    </body>
    </html>

Upvotes: 0

Views: 212

Answers (5)

noa-dev
noa-dev

Reputation: 3641

I have the feeling that you are overcomplicating things.

I would suggest you to alter your code to look like the following:

<div class="leftDiv">
            <div id="colorblock">
                <div data-operator="+" class="blocks">ADD</div>
                <div data-operator="-" class="blocks">SUBTRACT</div>
                <div data-operator="*" class="blocks">MULTIPLY</div>
                <div data-operator="/" class="blocks">DIVIDE</div>
            </div>
        </div>
<input type="text" size="1" id ="operator" placeholder="" />

Note, that the data-operator attribute on the divs is being used in the following script:

var operatorInput = document.getElementById("operator") // your input field
var buttonList = document.querySelectorAll('.blocks') // Stores all elements with the blocks class in an array

for(var i = 0; i < buttonList.length; i++){ // loops through all selected elements
    buttonList[i].addEventListener("click", function(e){ // attaches a function to each element
        operatorInput.value = e.target.getAttribute("data-operator") // sets the value of the input field according to the elements data-operator value
  })
}

This way you can select all of your buttons programmatically and loop through them to attach them with an event-listener which fires a function when being clicked.

When one of your buttons is being clicked the function emits an event (which is represented as e in the code), which refers to the pressed button. The pressed button, which is being represented by the event.target contains the data-operator attribute which you can use to display your desired symbol in the input field.

If you have further questions feel free to ask.

Here is a working fiddle example of that code https://jsfiddle.net/66gu0zur/

Upvotes: 1

freginold
freginold

Reputation: 3956

If what you want is to display each symbol depending on which operation was selected, here is a working solution:

<!DOCTYPE html>
    <html>
    <body>
    
    <div class="leftDiv">
    			<div id="colorblock">
    				<div id = "add" class = "blocks" onclick="displayOptr(this);">ADD</div>
    				<div id = "subtract" class = "blocks" onclick="displayOptr(this);">SUBTRACT</div>
    				<div id = "multiply" class = "blocks" onclick="displayOptr(this);">MULTIPLY</div>
    				<div id = "divide" class = "blocks" onclick="displayOptr(this);">DIVIDE</div>
    			</div>
    		</div>
    <input type = "text" size="1" id = "operator">
    
    
    <script>
    function displayOptr(that) {
        var val = that.id;
          if (val == "add"){
            	document.getElementById("operator").value = "+";
            } else if (val == "subtract"){
            	document.getElementById("operator").value = "-";
            } else if (val == "multiply"){
            	document.getElementById("operator").value = "*";
            } else if (val == "divide"){
            	document.getElementById("operator").value = "/"; 
            }
    }
    </script>
    
    </body>
    </html>

You were on the right track, your for loop looped through each of the selectors, so all you would see was the / since that was the last one. Like @ScottMarucs said, you were also missing a }.

Upvotes: 0

Nimish
Nimish

Reputation: 1016

You can check this also. Same code just minor changes

function displayOptr(i) {
    var optrArr =["+","-","*","/"];
   	if (i==0){
       	document.getElementById("operator").value = "+";
     } else if (i==1){
       	document.getElementById("operator").value = "-";
     } else if (i==2){
       	document.getElementById("operator").value = "*";
     } else if (i==3){
       	document.getElementById("operator").value = "/";    
     }                
}
<div class="leftDiv">
    <div id="colorblock">
        <div id = "add" class = "blocks" onclick="displayOptr(0)">ADD</div>
    		<div id = "subtract" onclick="displayOptr(1)" class = "blocks">SUBTRACT</div>
    		<div id = "multiply" onclick="displayOptr(2)" class = "blocks">MULTIPLY</div>
    		<div id = "divide" onclick="displayOptr(3)" class = "blocks">DIVIDE</div>
    </div>
</div>
    <input type = "text" size="1" id = "operator">

Upvotes: 0

Master Po
Master Po

Reputation: 1697

Since the methods loops 4 times it will always display / . Try this

<!DOCTYPE html>
<html>
  <body>
    <div class="leftDiv">
      <div id="colorblock">
        <div id = "add" class = "blocks" onclick="displayOptr('+')">ADD</div>
        <div id = "subtract" class = "blocks" onclick="displayOptr('-')">SUBTRACT</div>
        <div id = "multiply" class = "blocks" onclick="displayOptr('*')">MULTIPLY</div>
        <div id = "divide" class = "blocks" onclick="displayOptr('/')">DIVIDE</div>
      </div>
    </div>
    <input type = "text" size="1" id = "operator">
    <script>
      function displayOptr(symbol) {
          document.getElementById("operator").value = symbol;
      }
    </script>
  </body>
</html>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65873

Currently, you are missing a closing curly brace for your if statement and that is causing an error that is preventing your code from running.

After fixing that, your code loops through your array and upon each iteration, it places one of the symbols into the textbox. But, on the next iteration, it just replaces that symbol. When the code is done, you would always have the / in the textbox.

Instead, just pass the symbol you want displayed into the function.

Also, don't set up event handlers as HTML attributes (onclick, onmouseover, etc.) as this old syntax creates "spaghetti code", is hard to read, doesn't scale well, creates implicit global wrapper functions that alter the this binding and doesn't follow W3C Standards for Event registration. Do your event binding in JavaScript with addEventListener() instead.

Here's a working version:

<!DOCTYPE html>
    <html>
    <body>
    
    <div class="leftDiv">
    			<div id="colorblock">
    				<div id = "add" class = "blocks" onclick="displayOptr()">ADD</div>
    				<div id = "subtract" class = "blocks">SUBTRACT</div>
    				<div id = "multiply" class = "blocks">MULTIPLY</div>
    				<div id = "divide" class = "blocks">DIVIDE</div>
    			</div>
    		</div>
    <input type = "text" size="1" id = "operator">
    
    
    <script>
    
    // Get references to the elements you'll need:
    var a = document.getElementById("add");
    var s = document.getElementById("subtract");
    var m = document.getElementById("multiply");
    var d = document.getElementById("divide"); 
    var output = document.getElementById("operator");
    
    // Set up click event handlers that each call the same function but pass it 
    // a different value.
    a.addEventListener("click", function(){ displayOptr("+") });
    s.addEventListener("click", function(){ displayOptr("-") });
    m.addEventListener("click", function(){ displayOptr("*") });
    d.addEventListener("click", function(){ displayOptr("/") });    
    
    function displayOptr(input) {
      // Just take the input and display in the textbox
      output.value = input;       
    }
    </script>
    
    </body>
    </html>

Upvotes: 2

Related Questions