时间戳

首页 > 解决方案 > JavaScript 问题：在按钮单击中渲染部分字符串不起作用

javascript - JavaScript 问题：在按钮单击中渲染部分字符串不起作用

问题描述

问题是：
通过反转将数组 ["cakro", "gazar", "faarsi"] 更改为字符串。
1.首先将数组中的每个项目反转为orkac，razag，israaf。
2. 然后从最后一个元素连接，最后一个字符串将是 israafrazagcakro
3. 问题部分是单击按钮一次渲染两个字母。
即首先渲染“is”，然后才渲染“ra”，依此类推。

我的代码： 

<p id="demo"></p>

<script>
var fruits = ["cakro", "gazar", "faarsi"];
var first = fruits[0];
var second = fruits[1];
var third = fruits[2];

function reverse(first){
    var splitString = first.split("");
    var reverseArray = splitString.reverse(); 
    var joinArray = reverseArray.join("");
    return joinArray;
    }

var firstr = reverse(first);
var secondr = reverse(second);
var thirdr = reverse(third);
var total = thirdr+secondr+firstr;
document.getElementById("demo").innerHTML = total;
var count = 0;

function nextFunc(total){
        if (count = 0){  //to print 'is'
        document.getElementById("demo").innerHTML = total.substring(0,2);}
        else if (count = 1){  //to print 'ra'
                document.getElementById("demo").innerHTML = total.substring(2,4);}
        else if (count = 2){    //to print 'af'
                document.getElementById("demo").innerHTML = total.substring(4,6);}
        else {
                document.getElementById("demo").innerHTML = total.substring(6,8);}        
        count++;
        return (document.getElementById("demo").innerHTML);
}
</script>

<button type = "button" onclick = nextFunc(total) >Go</button>

问题是我不能在脚本部分中使用按钮部分，并且每次都会重置总的值，并且输出ra只是。但我希望输出在单击按钮时进行迭代。我想在核心 JS 中做到这一点，所以请帮忙。谢谢

标签： javascript

解决方案

使用 Array.map() 和 for 循环实现结果的更简洁方法：

var fruit = ["cakro", "gazar", "faarsi"];

// This maps every word in your array to a new array called reverse where every word has been reversed.
var reversed = fruit.map(word =>word.split("").reverse().join(""));
var word = reversed.join();



function nextFunc(word){
    for(let i=0;i<word.length;i++)
    {
        if(i+1 % 2 === 0) // Every two elements this will be true. 
        {
            document.getElementById("demo").innerHTML = word.substring(i-1,i);
        }
   }
}

简要说明：我们使用 ES6 的 Array.map() 功能一次性创建和转换原始数组。这些高阶数组函数非常有用。在我们生成反转字符串数组后，我们使用该join方法创建一个字符串。现在剩下的就是重写你的nextFunc函数。if else这一次，我们可以使用运算符来简化事情，而不是使用连续的语句%。每次循环迭代，我们检查当前索引是否是 2 的倍数，如果是，那么我们将从当前索引 (i) 和它之前的项目 (i-1) 执行子字符串拆分。

Array.map() 文档： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

推荐阅读