如何将单击按钮产生的控制台值转换为单击其他按钮时的数组格式

时间:2018-11-03 03:27:09

标签: javascript jquery html

我这里有一个简单的概念。我在控制台中单击按钮时获得了一些值,这是增量索引++,但是我需要在单击另一个按钮时将这些值组合成逗号分隔的数组格式。单击第一个按钮时控制台中的值,但是当我单击第二个按钮进行合并时,它显示为undefined。这是下面的代码。

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div><button id="button1" class="button1">submit1</button> </div>
<div><button id="garray" class="button1">genarete-array</button> </div>

脚本

    var index = 0;
    var id;

    $('#button1').on('click', function() {
        index++;
        var id = 'chart' + index
        console.log(id);
    });

$('#garray').on('click', function() {
var x = [];
x.push(id);
console.log(x);
//output ['chart1','chart2','chart3','chart4']
})

3 个答案:

答案 0 :(得分:0)

它不起作用,因为您有以下代码:

$('#button1').on('click', function() {
    index++;
    var id = 'chart' + index
    console.log(id);
});

特别是这一行:

var id = 'chart' + index

这是在声明一个名为id的新 local 变量,而不是更新 global 变量id。要解决此问题,只需将该行更改为此:

id = 'chart' + index

进一步阅读:

  1. https://developer.mozilla.org/en-US/docs/Glossary/Scope
  2. https://www.w3schools.com/js/js_scope.asp

答案 1 :(得分:0)

您要再次声明,您只需声明一次(“ var id”)即可,只要您要使用,就只需使用“ id = somevalue”,这是第二个问题是每当您单击第一个按钮时,您就会覆盖它的值,下面的代码将执行您想要的操作:

  var index = 0;
    var id = [];

    $('#button1').on('click', function() {
        index++;
        id.push('chart' + index)
        console.log('chart' + index);
    });

$('#garray').on('click', function() {
console.log(id);
//output ['chart1','chart2','chart3','chart4']
})

它在这里工作: http://jsfiddle.net/g0xbma5o/

答案 2 :(得分:0)

在这里使用

 var index = 0;
    var id;
    var x=[];

    $('#button1').on('click', function() {
        index++;
        var id = 'chart' + index;
        x.push(id);
        console.log(id);
    });

$('#garray').on('click', function() {

console.log(x);
//output ['chart1','chart2','chart3','chart4']
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div><button id="button1" class="button1">submit1</button> </div>
<div><button id="garray" class="button1">genarete-array</button> </div>