El uso de innerHTML sirve para modificar el valor de etiquetas tales como:
etc.
Como puedes ver en este ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo 1</title>
</head>
<body>
<p id="parrafo">Hola: </p>
<script>
let caja = document.getElementById("parrafo")
caja.innerHTML = "a todos"
</script>
</body>
</html>
Sin embargo para elementos del DOM tales como los inputs
se debe utilizar uno de sus atributos que es value
de esta forma:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo 2</title>
</head>
<body>
<input type="text" id="caja">
<script>
let caja = document.getElementById("caja")
caja.value = "Hola"
</script>
</body>
</html>
Dado lo anterior, entonces es neceasario que tu código se vea de este modo:
var frase = document.getElementById('cadena').value;
var letterCount = frase.split(/\W/).join('').length;
var contadorLetras = letterCount.toString();
console.log(letterCount);
document.getElementById('resultado').value= letterCount;