How do I use selectors to get different variable for ifs?-CodePudding

I'm working on a tool for my job to auto generate task comments to streamline agent workflow. I'm trying to use a selector to differentiate between ticket types and generate a comment string accordingly.

The problem I'm running into is I can't seem to get the page to tell the the selector has changed, and it will only give the if condition and ignore the else.

I'm certain I'm missing something simple but can't seem to figure it out.

<!DOCTYPE html>
<html>

<body>
  Select Ticket Type:
  <label name="ticket" id="ticket"></label>
  <select name="ticket" id="ticket">
    <option value="1">SMB</option>
    <option value="2">Complete</option>
  </select>

  <input type="text" id="ticketgen" placeholder="EnterTicket number" maxlength="8">
  <input type="button" id="tickgen" value="Generate">
  <p id="output"></p>
</body>


<script>
  const txt1 = document.getElementById('ticketgen');
  const btn1 = document.getElementById('tickgen');
  const out1 = document.getElementById('output');

  function fun1() {
    var tick = document.getElementById('ticket');
    var today = new Date();
    var date = (today.getMonth()   1)   '-'   today.getDate()   '-'   today.getFullYear();
    var time = today.getHours()   ':'   today.getMinutes();
    var dateTime = date   ' '   time;
    setInterval(1000);

    if (tick = 1) {
      out1.innerHTML = "Correspondence:"   ' '   dateTime   ' '   txt1.value   ' '   "SMB Correspondence";
    } else {
      out1.innerHTML = "Correspondence:"   ' '   dateTime   ' '   txt1.value   ' '   "# attempt, contacted CX @";
    }
  }



  btn1.addEventListener('click', fun1);
</script>



</html>

CodePudding user response：

A few issues to address:

your comparison needs a double equal - ==
tick itself is just an html element, you can't compare it to a number, you need to get the currently selected index
you use id=ticket twice, so when you get the html element by that ID, it grabs the first one, which is a label.

I believe this code should fix your issues

<!DOCTYPE html>
<html>

<body>
Select Ticket Type:
<label name="ticket" id="ticket-label"></label>
<select name="ticket" id="ticket">
    <option value="1">SMB</option>
    <option value="2">Complete</option>
</select>

<input type="text" id="ticketgen" placeholder="EnterTicket number" maxlength="8">
<input type="button" id="tickgen" value="Generate">
<p id="output"></p>
</body>


<script>
    const txt1 = document.getElementById('ticketgen');
    const btn1 = document.getElementById('tickgen');
    const out1 = document.getElementById('output');

    function fun1() {
        var tick = document.getElementById('ticket');
        var today = new Date();
        var date = (today.getMonth() 1) '-' today.getDate() '-' today.getFullYear();
        var time = today.getHours()   ':'   today.getMinutes();
        var dateTime = date ' ' time;
        setInterval(1000);

        if (tick.selectedIndex == 0){
            out1.innerHTML = "Correspondence:" ' ' dateTime ' ' txt1.value ' ' "SMB Correspondence";
        } else {
            out1.innerHTML = "Correspondence:" ' ' dateTime ' ' txt1.value ' ' "# attempt, contacted CX @";
        }
    }
    
    btn1.addEventListener('click',fun1);
</script>
</html>

CodePudding user response：

Your value for tick would be a string and you are checking it as integer. Try by changing it to, if (tick == "1").

Label attribute id is same as of select attribute. Try by changing the label id. All HTML attributes must have unique id / name.

In Plain JavaScript, you get the selected option value as follow

var e = document.getElementById("tick");
var value = e.options[e.selectedIndex].value;

Hope this helps! :)