2016-11-30 11 views
1

Так что я пытаюсь отобразить слова, введенные в моем текстовом поле, следующим образом: (thomas) будет отображаться как = "t, th, tho, thom, thoma, thomas ». Что мне вводить в charAt, чтобы это произошло? или мне нужно добавить что-то еще? Заранее спасибо! Javascript - отображение слов с charAt одной буквой + одной буквой и т. Д.

<head> 
    <meta charset="utf-8"> 

<script> 

    function printit() 
    { 
    var temptext = document.getElementById("mytext").value; 
    var tempa = temptext.charAt(); 
    document.getElementById("translated").innerHTML=tempa; 

    } 

</script> 


</head> 


<body> 
    <h1> </h1> 

<form name="f1"> 
<input type="text" id="mytext" value="" /> 
<input type="button" value="print" onclick="printit()"/> 

</form> 
<div id="translated" style="background-color:gray"></div> 

</body> 


</html> 
+1

['подстрока'] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring) в пределах [цикла] (https: //developer.mozilla .org/en-US/docs/Web/JavaScript/Reference/Statement/for) будет проще. – Teemu

+0

@Teemu действительно :) – xShirase

ответ

1

раствор, используя ES6 Array.from и String#slice методы.

<script> 
 
    function printit() { 
 
    var temptext = document.getElementById("mytext").value; 
 
    document.getElementById("translated").innerHTML = Array.from({ 
 
     length: temptext.length 
 
    }, (v, i) => temptext.slice(0, i + 1)).join(); 
 

 
    } 
 
</script> 
 

 

 
<form name="f1"> 
 
    <input type="text" id="mytext" value="" /> 
 
    <input type="button" value="print" onclick="printit()" /> 
 

 
</form> 
 
<div id="translated" style="background-color:gray"></div>


Используя Array#map и String#split методы.

<script> 
 
    function printit() { 
 
    var temptext = document.getElementById("mytext").value; 
 
    document.getElementById("translated").innerHTML = temptext.split('').map(function(v, i) { 
 
     return temptext.slice(0, i + 1) 
 
    }).join(); 
 

 
    } 
 
</script> 
 

 

 
<form name="f1"> 
 
    <input type="text" id="mytext" value="" /> 
 
    <input type="button" value="print" onclick="printit()" /> 
 

 
</form> 
 
<div id="translated" style="background-color:gray"></div>

1

Более простое решение:

function writemore(){ 
 
    var a = document.getElementById("mytext").value; 
 
    var out = []; 
 
    for(var i=1;i<a.length+1;i++){ 
 
     out.push(a.substring(0,i)); 
 
    } 
 
    document.getElementById("translated").innerHTML = out.join(','); 
 
};
<form name="f1"> 
 
    <input type="text" id="mytext" value="" /> 
 
    <input type="button" value="print" onclick="writemore();" /> 
 

 
</form> 
 
<div id="translated" style="background-color:gray"></div>

0

Вы можете использовать Array.prototype.map и String.prototype.slice для формирования ожидаемого результата.

function printit(){ 
 
    var text = document.getElementById('mytext').value; 
 
    document.getElementById("translated").innerHTML = text.split('').map(function(v, i){ return text.slice(0, i + 1)}).join(', '); 
 
}
<h1> </h1> 
 

 
<form name="f1"> 
 
    <input type="text" id="mytext" value="" /> 
 
    <input type="button" value="print" onclick="printit()" /> 
 

 
</form> 
 
<div id="translated" style="background-color:gray"></div>

0
If you want to display "t, th, tho, thom, thoma, thomas" you should to store your position of charAt(position+1) and make for condition.., so : 

t : 0==> display = display + ", "+ charAt(position+1) 
th : 1==> display = display + ", "+ charAt(position+1) 
tho: 2 ==> display = display + ", "+ charAt(position+1) 
0

Простейшее образом, если вы установите на использовании Шара, было бы это:

var outputString = "", inputString = "Thomas", i = -1, inputLength = inputString.length 

while(++i < inputLength){ 
    outputString += inputString.charAt(i) 
    console.log(outputString) 
} 

Если буквально нужно напечатать «т, й, tho, thom, thoma, thomas ", а не последовательность бревен, эта версия будет выполнена так, что

var outputString = "", outputArray = [], inputString = "Thomas", i = -1, inputLength = inputString.length 

while(++i < inputLength){ 
    outputString += inputString.charAt(i) 
    outputArray.push(outputString) 
} 


console.log(outputArray.join(", "))