javascript怎么实现输入文字显示对应的内容？

Question

我想要做一个输入字符，比如文本框输入：abcdab 点按钮显示：123412

字母和数字是对应的
我自己写出来在浏览器控制台看是实现了，但怎么弄到网页上？
var ca = ["a", "b" ,"c" , "d", "e", "f"];
var ca1 = [ca.indexOf("c")];//提取数组指定元素索引值
ca1.unshift("00");//在前面添加元素
ca1=[ca1.join("")];//组成新的数组

var ca2 = [ca.indexOf("d")];
ca2.unshift("00");//在前面添加元素
ca2=[ca2.join("")];

var ca3 = [ca.indexOf("d")];
ca3.unshift("00");//在前面添加元素
ca3=[ca3.join("") ];

var ca4 = [ca.indexOf("a")];
ca4.unshift("00");//在前面添加元素
ca4=[ca4.join("") ];

var cb = ca1.concat(ca2,ca3,ca4);//组成新的数组
cb.join(" ") ; //转换成带空格的字符串 "002 003 003 000"

Answer 1

<input id="txt"/><input id="btn" type="button" value="点我"/>
<div id="show"></div>
<script>
btn.onclick=function(){
var ca = ["a", "b" ,"c" , "d", "e", "f"];
show.innerHTML=txt.value.split("").map(e=>ca.indexOf(e)+1).join("");
}
</script>

Answer 2

*{
padding: 0;
margin: 0;

}
.hide {
display: none;
}
.show {
display: block;
}
.flag {
width: 80px;
height: 3px;
background-color: red;
position: absolute;

}
a {
text-decoration: none;
width: 80px;
display: inline-block;
text-align: center;
}

<div class="news">
<div class="newt" id="newT">
<a href="" class="cuxiao">促销</a>
<a href="" class= "gg">公告</a>
<a href="" class="good">好消息</a>
<div id="flag" class="flag"></div>
</div>
<div class="new-con" id="newsbody">
<div id="one" class="show">
<ul>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
</ul></div>
<div id="one" class="hide">
<ul>
<li>22222222222222222</li>
<li>22222222222222222</li>
<li>22222222222222222</li>
<li>22222222222222222</li>
</ul></div>
<div id="one" class="hide">
<ul>
<li>3333333333333333333</li>
<li>3333333333333333333</li>
<li>3333333333333333333</li>
<li>3333333333333333333</li>
</ul></div>
</div>
</div>
<script>
var newT = document.getElementById('newT');
var newsbody = document.getElementById('newsbody');
var flag = document.getElementById('flag');
for(var i = 0;i<3;i++){
var link = newT.children[i];
link.onmouseover = linkmouseover;
link.setAttribute('index',i);
}
function linkmouseover() {
var offsetLeft = this.offsetLeft;
animate(flag,offsetLeft);
for (var i = 0,len = newsbody.children.length; i < len ;i++){
var div = newsbody.children[i];
//判断类样式是否已经有hide
if (div.className.indexOf('hide')===-1){
div.className = 'hide';
}
}
var index = parseInt(this.getAttribute('index'));
newsbody.children[index].className = 'show';
}
function animate (element,target) {
var timeid = null;
if(timeid) {
clearInterval(timeid);
timeid = null;
}
timeid = setInterval(function () {
var step = 6;
var current = element.offsetLeft;
if(current > target){
step = -Math.abs(step);
}
if(Math.abs(current - target) <= Math.abs(step)){
clearInterval(timeid);
element.style.left = target+'px';
return;}
current += step;
element.style.left = current + 'px';

},3);
}

</script>

Answer 3

话说为啥不用ascii码

Answer 4

<input id="txt"/><input id="btn" type="button" value="点我"/>
<div id="show"></div>
<script>
***.onclick=function(){
var ca = ["a", "b" ,"c" , "d", "e", "f"];
***.innerhtml=txt.***.split("").map(e=>***.indexof(e)+1).join("");
}
</script>

Answer 5

<input id="txt"/><input id="btn" type="button" value="点我"/>
<div id="show"></div>
<script>
***.onclick=function(){
var ca = ["a", "b" ,"c" , "d", "e", "f"];
***.innerhtml=txt.***.split("").map(e=>***.indexof(e)+1).join("");
}
</script>