01digit-sum-root.css

#input-num{
  display: block;
  height: 1.5rem;
  margin: 20px auto;
}
.output{
  box-sizing: border-box;
  width: 90%;
  margin: 20px auto;
  border: 2px solid #777;
}
.output-title{
  padding: 4px 8px;
  border-bottom: 1px solid #777;
  background-color: #eee;
  text-align: center;
}
.output-body{
  padding: 4px 8px;
  text-align: right;
}


@media screen and (min-width:769px) {
  .output{
    width: 50%;
  }
}

02digit-sum-root.html

<input type="number" min="1" value="99" placeholder="1" id="input-num">
<div class="output">
  <div class="output-title">数字和</div>
  <div class="output-body">
    <div id="digit-sum"></div>
  </div>
</div>
<div class="output">
  <div class="output-title">数字根</div>
  <div class="output-body">
    <div id="digit-root"></div>
  </div>
</div>

03digit-sum-root.js

const input_num = document.getElementById('input-num');
const digit_sum = document.getElementById('digit-sum');
const digit_root = document.getElementById('digit-root');

input_num.addEventListener('input',calc);
calc();

function calc(){
  const num = Number(input_num.value);
  //例外処理
  if(isNaN(num)){
    inputError();
    return;
  }
  if(!Number.isInteger(num)){
    inputError();
    return;
  }
  if(num==0){
    inputError();
    return;
  }
  if(num>Number.MAX_SAFE_INTEGER){
    inputError('数値が大きすぎます。');
    return;
  }
  //数字和
  const array = String(num).split('').map(v=>Number(v));
  const sum = array.reduce((a,b)=>a+b);
  digit_sum.textContent = sum;
  //数字根
  let root = num%9;
  if(root==0) root=9;
  digit_root.textContent = root;
}

function inputError(s){
  const str = s||'入力値に誤りがあります。';
  digit_sum.textContent = str;
  digit_root.textContent = str;
}