Algorithm to set service order priority

Asked

Viewed 219 times

-1

Good evening. I am a beginner in programming and a student of T.I. I just created my account here at Stackoveflow. I have basics (WELL basics) of Python and Javascript (and HTML and CSS as well).

I am trying to develop a simple program for a project of my course, where we have a "company" of T.I. that needs a method of control of service flow, to define the priority of service orders.

The idea is that the program asks some questions regarding the service. Each question receives a value if the answer is positive or negative. At the end of the program, the values are summed, and if they reach a given score, they are categorized as Priority 1, Priority 2 or Priority 3.

I made a template using Javascript and HTML, however, it is not working at all.

Take it easy, I know you probably have some pretty crazy mistakes. If anyone can help, I’d appreciate it

var per1 = document.getElementByName('p1');
var per2 = document.getElementByName('p2');
var per3 = document.getElementByName('p3');
var rs = document.getElementById('res');

function calc() {
  if (per1 == 's') {
    var per1 = 1;
  } else if (per1 == n) {
    var per1 = 2;
  } else {
    alert('Por favor, digite um valor válido!');
  }

  if (per2 == s) {
    var per2 = 1;
  } else if (per2 == n) {
    var per2 = 2;
  } else {
    alert('Por favor, digite um valor válido!');
  }

  if (per3 == s) {
    var per3 = 3;
  } else if (per3 == n) {
    var per3 = 1;
  } else {
    alert('Por favor, digite um valor válido!');
  }
  var rs = (per1 + per2 + per2);
  innerHTML.res += ` ${rs}`;
}
<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset=utf-8>
  <title>Priority IT</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Priority IT - <em>dualreceiver</em></h1>
  </header>
  <section>
    <div id="d1">
      <img src="dualreceiver.png" alt="Logo dualreceiver">
      <h2>Perguntas:</h2>
      <h3><em>Responda com "s" para SIM ou "n" NÃO:</em></h3>
    </div>
  </section>

  <div id="d2">
    <p><strong>1</strong>. O diagnóstico foi conciso? <input type="text" name="p1"></p>
    <p><strong>2</strong>. Você considera que o problema será resolvido de forma relativamente rápida? <input type="text" name="p2"></p>
    <p><strong>3</strong>. Cliente é PCD, idoso ou necessita atenção especial? <input type="text" name="p3"></p>
    <input type="button" value="Calculate" onclick='calc()'>

    <p><div id="res"> Calculando... </div></p>
    <script src="script.js"></script>
  </div>
</body>
</html>

javascript html5

1 answer

2


  1. You have to take input values inside the function, not outside. This is because when calling the function, the variables to which input values are assigned will always be empty in the page loading, and the function will not pick up the correct values at the time the function is called.

  2. document.getElementByName does not exist. There is document.getElementsByName (Elements and not Element). And how document.getElementsByName returns a list of nodes, you need to use the index [0], and to take the input value, add .value in the end: document.getElementsByName('p1')[0].value.

  3. Missing quotes on strings s and n within the if's, otherwise these letters will be treated as variables that do not exist.

  4. Since the variables per1, per2 and per3 have already been declared with var, it is not necessary to use var again to change their values.
  5. innerHTML.res is incorrect. First comes the element and then the .innerHTML, thus: res.innerHTML.
  6. Put a return after each alert to prevent the function from reaching the end in the event of entering a block else.
  7. In the sum of the values you repeated the per2 in the end: per1 + per2 + per2, when the right one would be: per1 + per2 + per3
  8. In the innerHTML would not need to use the operator +=. If you want to replace the content of div#res, the operator would be only the =.
  9. Putting a div inside a <p> is incorrect in HTML. You can use only <p>, in this way: <p id="res"> Calculando...</p>.

Your code would look like this:

var rs = document.getElementById('res');

function calc() {
   var per1 = document.getElementsByName('p1')[0].value;
   var per2 = document.getElementsByName('p2')[0].value;
   var per3 = document.getElementsByName('p3')[0].value;
  if (per1 == 's') {
    per1 = 1;
  } else if (per1 == 'n') {
    per1 = 2;
  } else {
    alert('Por favor, digite um valor válido!');
    return;
  }

  if (per2 == 's') {
    per2 = 1;
  } else if (per2 == 'n') {
    per2 = 2;
  } else {
    alert('Por favor, digite um valor válido!');
    return;
  }

  if (per3 == 's') {
    per3 = 3;
  } else if (per3 == 'n') {
    per3 = 1;
  } else {
    alert('Por favor, digite um valor válido!');
    return;
  }
  var rs = (per1 + per2 + per3);
  res.innerHTML = ` ${rs}`;
}
<header>
   <h1>Priority IT - <em>dualreceiver</em></h1>
</header>
<section>
   <div id="d1">
      <img src="dualreceiver.png" alt="Logo dualreceiver">
      <h2>Perguntas:</h2>
      <h3><em>Responda com "s" para SIM ou "n" NÃO:</em></h3>
   </div>
</section>
<div id="d2">
   <p><strong>1</strong>. O diagnóstico foi conciso? <input type="text" name="p1"></p>
   <p><strong>2</strong>. Você considera que o problema será resolvido de forma relativamente rápida? <input type="text" name="p2"></p>
   <p><strong>3</strong>. Cliente é PCD, idoso ou necessita atenção especial? <input type="text" name="p3"></p>
   <input type="button" value="Calculate" onclick='calc()'>
   <p id="res"> Calculando...</p>
    <script src="script.js"></script>
</div>

  • Thank you very much!

  • I know it was some kind of silly mistakes, I’ll study more. Thank you very much!

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.