Simple keyword cipher

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div id="parameters">
    <label>Keyword</label>
    <input type="text" value="abc" name="keyword" oninput="propChange()" size="20">
    <br>
    <label>Position 1</label>
    <input type="number" value="1" name="pos1" oninput="propChange()" min="1">
    <br>
    <label>Position 2</label>
    <input type="number" value="3" name="pos2" oninput="propChange()" min="1">
    <br>
    <label>Message</label>
    <input type="text" value="a message goes here" name="plaintext" oninput="propChange()" size="40">
    <br>
    <br>
    <label>Function output</label>
    <p id="functionOutput"></p>
  </div>
  <h3>cipher result using keyword and two position numbers</h3>
  <input type="text" name="result" value="default result" size="40">
  <script>
    propChange();

    function propChange() {
      var keyword = document.querySelector('[name="keyword"]').value;
      var char1 = keyword.charAt(Number(document.querySelector('[name="pos1"]').value - 1));
      var char2 = keyword.charAt(Number(document.querySelector('[name="pos2"]').value - 1));
      var plaintext = document.querySelector('[name="plaintext"]').value;
      var getVal = keywordCipher( char1, char2, plaintext);
      setFunctionOutput(getVal.error + ", " + getVal.message);
      if (getVal.error != -1) {
        setCipher(getVal.value);
      } else {
        setCipher(getVal.message);
      }
        
    }

    function setFunctionOutput(val) {
      document.getElementById("functionOutput").innerHTML = val;
    }

    function setCipher(val) {
      document.querySelector('[name="result"]').value = val;
    }
  </script>
</body>

</html>

var keywordCipher = function(char1, char2, plaintext) {
  console.log("got ", char1, char2, plaintext);
  var comp1 = "abcdefghijklmnopqrstuvwxyz";
  var diff = comp1.indexOf(char2) - comp1.indexOf(char1);

  var msg = {
    value: plaintext,
    error: 0,
    message: "diff: " + diff
  };
  
  var trans = "";
  for(var i =0; i < plaintext.length; i++) {
    var plainChar = plaintext.charAt(i);
    if(plainChar == " ") {
      trans = trans.concat(" ");
    } else {
      var transCharPos = (comp1.indexOf(plainChar) + diff)%comp1.length;
      var transChar = comp1.charAt(transCharPos);
      trans = trans.concat(transChar);
    }
  }

  msg.value = trans;
  
  console.log("msg.value: " + msg.value);
  
  return msg;
}

Exercises from the book:
# CODES,  
_CIPHERS, SECRETS AND CRYPTIC COMMUNICATION_

\- Fred B. Wrixon

body {
  font-family: "Arial";
}

h4, h3 {
  color: lightgray;
}

label {
  padding-right: 1em;
}

input[name="pos1"],
input[name="pos2"] {
  width: 4em;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

#parameters {
  border: 1px solid gray;
  padding: 1em;
}

#functionOutput{
  background-color: lightgray;
  padding: 0.25em;
  margin: 0.25em 0 0 0;
}