Having difficulty getting the sign operator to show up in a text field

Question

Having difficulty getting the sign operator to show up in a text field

Whenever the ADD div is clicked, "+" should be displayed on the textbox. The same goes for SUBTRACT, MULTIPLY, and DIVIDE. However, I am struggling to make the operators show on the textbox. Here is what I have managed to come up with 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>

javascript html css

Answer 1

Answer №1

Your current issue stems from a missing closing curly brace in your if statement, causing an error that is halting the execution of your code.

Once you rectify this, your code proceeds to loop through an array and assigns one symbol to the textbox on each iteration. However, it then replaces that symbol in the next iteration, resulting in only having "/" displayed in the textbox when the loop finishes.

A simpler approach would be to directly pass the desired symbol as an argument to the function.

In addition, avoid setting event handlers as HTML attributes (e.g., onclick, onmouseover) as this outdated practice leads to messy "spaghetti code", makes code unreadable, lacks scalability, introduces global functions altering the 'this' binding, and deviates from W3C Standards for Event registration. Opt for using JavaScript's addEventListener() method for event binding instead.

Here's a revised version incorporating these changes:

<!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>

Answer 2

Your current issue stems from a missing closing curly brace in your if statement, causing an error that is halting the execution of your code.

Once you rectify this, your code proceeds to loop through an array and assigns one symbol to the textbox on each iteration. However, it then replaces that symbol in the next iteration, resulting in only having "/" displayed in the textbox when the loop finishes.

A simpler approach would be to directly pass the desired symbol as an argument to the function.

In addition, avoid setting event handlers as HTML attributes (e.g., onclick, onmouseover) as this outdated practice leads to messy "spaghetti code", makes code unreadable, lacks scalability, introduces global functions altering the 'this' binding, and deviates from W3C Standards for Event registration. Opt for using JavaScript's addEventListener() method for event binding instead.

Here's a revised version incorporating these changes:

<!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>

Answer 3

Answer №2

Since the loop runs 4 times, it will consistently display the symbol /. Give this a try:

<!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>

Answer 4

Since the loop runs 4 times, it will consistently display the symbol /. Give this a try:

<!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>

Answer 5

Answer №3

I have the impression that you might be making things more complex than necessary.

My recommendation would be to adjust your code to resemble 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="" />

Please note that the data-operator attribute on the div elements is utilized in the script below:

var operatorInput = document.getElementById("operator") // reference to input field
var buttonList = document.querySelectorAll('.blocks') // array of all elements with blocks class

for(var i = 0; i < buttonList.length; i++){ // iterate through selected elements
    buttonList[i].addEventListener("click", function(e){ // attach a function to each element
        operatorInput.value = e.target.getAttribute("data-operator") // set input field value based on data-operator attribute
  })
}

This method allows for programmatically selecting and looping through all buttons to attach event-listeners for click events.

When a button is clicked, the function triggers an event (represented by e), which references the clicked button. The clicked button, accessed via event.target, contains the data-operator attribute used to display the desired symbol in the input field.

If you have any further inquiries, do not hesitate to ask.

You can find a functional example of this code in action at https://jsfiddle.net/66gu0zur/

Answer 6

I have the impression that you might be making things more complex than necessary.

My recommendation would be to adjust your code to resemble 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="" />

Please note that the data-operator attribute on the div elements is utilized in the script below:

var operatorInput = document.getElementById("operator") // reference to input field
var buttonList = document.querySelectorAll('.blocks') // array of all elements with blocks class

for(var i = 0; i < buttonList.length; i++){ // iterate through selected elements
    buttonList[i].addEventListener("click", function(e){ // attach a function to each element
        operatorInput.value = e.target.getAttribute("data-operator") // set input field value based on data-operator attribute
  })
}

This method allows for programmatically selecting and looping through all buttons to attach event-listeners for click events.

When a button is clicked, the function triggers an event (represented by e), which references the clicked button. The clicked button, accessed via event.target, contains the data-operator attribute used to display the desired symbol in the input field.

If you have any further inquiries, do not hesitate to ask.

You can find a functional example of this code in action at https://jsfiddle.net/66gu0zur/

Answer 7

Answer №4

If you need to show a different symbol based on the selected operation, you can use this 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 close with your loop but only saw one symbol because of missing instructions. As @ScottMarucs pointed out, don't forget the closing bracket.

Answer 8

If you need to show a different symbol based on the selected operation, you can use this 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 close with your loop but only saw one symbol because of missing instructions. As @ScottMarucs pointed out, don't forget the closing bracket.

Answer 9

Answer №5

Feel free to verify this as well. It's essentially the same code with some minor tweaks

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">

Answer 10

Feel free to verify this as well. It's essentially the same code with some minor tweaks

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">

Having difficulty getting the sign operator to show up in a text field

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to create 7 or 8 column grids with Vuetify's v-row and v-col components?

Leveraging JavaScript functions for invoking Ajax requests, accompanied by ASP.NET controls

What causes the border to trigger the appearance of a scrollbar due to an overflow?

What is the best way to delete a model from a Backbone.Collection?

Using jQuery to set the background-image on the body's after pseudo-element with CSS

Vue js is throwing an error message that says "Reading 'push' property of undefined is not possible"

Increase the background image size for a <li> element

Launch a new tab within the parent window, passing on variables from the parent window

Tips for ensuring Accordion menu closes upon clicking a second time

Looking for JavaScript code that can dynamically create an HTML table from JSON data

The function "toggleHeightAndOpacity" cannot be accessed on this object because it is not defined

Using React components with Material UI to create styled div boxes

Tips for combining text and an unordered list on the same line:

What is the proper way to invoke a variable-function in Node.js?

How can you use a single parameter in a JavaScript function to swap the values of two numbers

The sticky navbar fails to stay in place when the content becomes too lengthy

Modifying CSS Styles using JQuery

What is the best way to add an ellipsis to the conclusion of a paragraph using .dotdotdot?

if the current value in the field surpasses the specified value in JavaScript

Ensuring Secure API Request Distribution