Html文件不从javascript文件中读取数组作为输入

Question

这是我的app.js文件

var earn=[' ',' ',' ',' ',' '];
var lost=['50','60','100','40','20'];
var Break=['40','30','90','90','40'];

var win = Titanium.UI.createWindow({
    backgroundColor: 'white'
});

var lbl1 = Ti.UI.createLabel({
    backgroundColor: '#CED8F6',
    height:'5%',
    width:'10%',
    top:0,
    left:0,
    borderWidth: 2,
    borderColor: 'black',
});

var lbl2 = Ti.UI.createLabel({
    backgroundColor: 'white',
    text:'Earn',
    height:'5%',
    width:'10%',
    top:'5%',
    left:0,
    color: 'black',
    borderWidth: 2,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
}); 
win.add(lbl2);

var lbl3 = Ti.UI.createLabel({
    backgroundColor: '#CED8F6',
    text:'Lost',
    height:'5%',
    width:'10%',
    top:'10%',
    left:0,
    color: 'black',
    borderWidth: 2,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl3);

var lbl4 = Ti.UI.createLabel({
    backgroundColor: 'white',
    text:'Break',
    height:'5%',
    width:'10%',
    top:'15%',
    left:0,
    color: 'black',
    borderWidth: 2,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl4);

var lbl5 = Ti.UI.createLabel({
    backgroundColor: 'white',
    text:'Jan',
    height:'5%',
    width:'10%',
    top:0,
    left:'10%',
    color: 'black',
    borderWidth: 2,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl5);

var textfield1 = Ti.UI.createTextField({
    backgroundColor: '#CED8F6',
    value:earn[0],
    height:'5%',
    width:'10%',
    top:'5%',
    left:'10%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD, 
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield1);

var lbl7 = Ti.UI.createLabel({
    backgroundColor: 'white',
    text:lost[0],
    height:'5%',
    width:'10%',
    top:'10%',
    left:'10%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl7);

var lbl8 = Ti.UI.createLabel({
    backgroundColor: '#CED8F6',
    text:Break[0],
    height:'5%',
    width:'10%',
    top:'15%',
    left:'10%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl8);

var lbl9 = Ti.UI.createLabel({
    text:'Feb',
    backgroundColor: '#CED8F6',
    height:'5%',
    width:'10%',
    left:'20%',
    top:'0%',
    color:'black',
    borderWidth: 2,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl9);

var textfield2 = Ti.UI.createTextField({
    backgroundColor: 'white',
    value:earn[1],
    height:'5%',
    width:'10%',
    top:'5%',
    left:'20%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD,
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
}); 
win.add(textfield2);

var lbl11 = Ti.UI.createLabel({
    backgroundColor: '#CED8F6',
    text:lost[1],
    height:'5%',
    width:'10%',
    top:'10%',
    left:'20%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl11);

var lbl12 = Ti.UI.createLabel({
    backgroundColor: 'white',
    text:Break[1],
    height:'5%',
    width:'10%',
    top:'15%',
    left:'20%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl12);

var lbl13 = Ti.UI.createLabel({
    backgroundColor: 'white',
    text:'March',
    height:'5%',
    width:'10%',
    top:0,
    left:'30%',
    color: 'black',
    borderWidth: 2,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl13);

var textfield3 = Ti.UI.createTextField({
    backgroundColor: '#CED8F6',
    value:earn[2],
    height:'5%',
    width:'10%',
    top:'5%',
    left:'30%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD, 
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield3);

var lbl15 = Ti.UI.createLabel({
    backgroundColor: 'white',
    text:lost[2],
    height:'5%',
    width:'10%',
    top:'10%',
    left:'30%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl15);

var lbl16 = Ti.UI.createLabel({
    backgroundColor: '#CED8F6',
    text:Break[2],
    height:'5%',
    width:'10%',
    top:'15%',
    left:'30%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl16);

var lbl17 = Ti.UI.createLabel({
    text:'Apr',
    backgroundColor: '#CED8F6',
    height:'5%',
    width:'10%',
    left:'40%',
    top:'0%',
    color:'black',
    borderWidth: 2,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl17);

var textfield4 = Ti.UI.createTextField({
    backgroundColor: 'white',
    value:earn[3],
    height:'5%',
    width:'10%',
    top:'5%',
    left:'40%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD, 
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
}); 
win.add(textfield4);

var lbl19 = Ti.UI.createLabel({
    backgroundColor: '#CED8F6',
    text:lost[3],
    height:'5%',
    width:'10%',
    top:'10%',
    left:'40%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl19);

var lbl20 = Ti.UI.createLabel({
    backgroundColor: 'white',
    text:Break[3],
    height:'5%',
    width:'10%',
    top:'15%',
    left:'40%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl20);

var lbl21= Ti.UI.createLabel({
    backgroundColor: 'white',
    text:'May',
    height:'5%',
    width:'10%',
    top:0,
    left:'50%',
    color: 'black',
    borderWidth: 2,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl21);

var textfield5 = Ti.UI.createTextField({
    backgroundColor: '#CED8F6',
    value:earn[4],
    height:'5%',
    width:'10%',
    top:'5%',
    left:'50%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    keyboardType: Titanium.UI.KEYBOARD_NUMBER_PAD, 
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(textfield5);

var lbl23 = Ti.UI.createLabel({
    backgroundColor: 'white',
    text:lost[4],
    height:'5%',
    width:'10%',
    top:'10%',
    left:'50%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl23);

var lbl24 = Ti.UI.createLabel({
    backgroundColor: '#CED8F6',
    text:Break[4],
    height:'5%',
    width:'10%',
    top:'15%',
    left:'50%',
    color: 'black',
    borderWidth: 1,
    borderColor: 'black',
    textAlign: Titanium.UI.TEXT_ALIGNMENT_CENTER,
});
win.add(lbl24);

var btn = Ti.UI.createButton({
title: 'Bar Chart',
bottom: '5%',
left: '2%',
width: '10%'
});
btn.addEventListener('click', function(e)
{
win.remove(layer);
win.add(webview);
});

//win.add(webview);


var btn1 = Ti.UI.createButton({
title: 'Pie Chart',
bottom: '12%',
left: '2%',
width: '10%'
});
btn1.addEventListener('click', function(e)
{
earn[0] = textfield1.value;
earn[1] = textfield2.value;
earn[2] = textfield3.value;
earn[3] = textfield4.value;
earn[4] = textfield5.value;
alert(earn[0]);
win.add(layer);
win.remove(webview);    
});

var webview = Titanium.UI.createWebView({
    url:'chart.html',
    top: '25%',
    left: '12%',
});
webview.addEventListener('beforeload',function(e)
{
     earn[0] = textfield1.value;
    earn[1] = textfield2.value;
    earn[2] = textfield3.value;
    earn[3] = textfield4.value;
    earn[4] = textfield5.value;

   wbv1.evalJS("var earn[0] ='"+earn[0]+"';");
   wbv1.evalJS("var earn[1] ='"+earn[1]+"';");
   wbv1.evalJS("var earn[2] ='"+earn[2]+"';");
   wbv1.evalJS("var earn[3] ='"+earn[3]+"';");
   wbv1.evalJS("var earn[4] ='"+earn[4]+"';");
});

var layer = Ti.UI.createView({
    top: '25%',
    left: '12%',
    bottom: '0%',

});
//win.add(layer);

var wbv1 = Ti.UI.createWebView({
    url:'pie1.html',
    top: '0%',
    left: '0%',
    right:'67%',
    //bottom: 0,
});
wbv1.addEventListener('afterload',function(e)
{
earn[0] = textfield1.value;
earn[1] = textfield2.value;
earn[2] = textfield3.value;
earn[3] = textfield4.value;
earn[4] = textfield5.value;

wbv1.evalJS("var earn[0] ='"+earn[0]+"';");
wbv1.evalJS("var earn[1] ='"+earn[1]+"';");
wbv1.evalJS("var earn[2] ='"+earn[2]+"';");
wbv1.evalJS("var earn[3] ='"+earn[3]+"';");
wbv1.evalJS("var earn[4] ='"+earn[4]+"';");

});

layer.add(wbv1);

var wbv2 = Ti.UI.createWebView({
    url:'pie2.html',
    top: '0%',
    left: '33%',
    right:'33%',
    //bottom: 0,
});
layer.add(wbv2);

var wbv3 = Ti.UI.createWebView({
    url:'pie3.html',
    top: '0%',
    left: '67%',
    right:'0%',
    //bottom: 0,
});
layer.add(wbv3);

win.add(btn1);
win.add(btn);
win.add(lbl1);
win.open();

这是我的pie1.html

<html>
<head>
<title> Earn </title>
<script language="javascript" src="http://www.google.com/jsapi"></script>
<script language="javascript" src="app.js"  type="text/javascript"></script>
<meta name="viewport" content="user-scalable=0">
</head>
<body>

<div id="chart"></div>

<script type="text/javascript">

document.ontouchmove = function(event){
event.preventDefault();
}

  var queryString = '';
  var dataUrl = '';



  function onLoadCallback() {
    if (dataUrl.length > 0) {
      var query = new google.visualization.Query(dataUrl);
      query.setQuery(queryString);
      query.send(handleQueryResponse);
    } else {
      var dataTable = new google.visualization.DataTable();
      dataTable.addRows(5);

      dataTable.addColumn('number');
      dataTable.setValue(0, 0, +earn[0]);
      dataTable.setValue(1, 0, +earn[1]);
      dataTable.setValue(2, 0, +earn[2]);
      dataTable.setValue(3, 0, +earn[3]);
      dataTable.setValue(4, 0, +earn[4]);

      draw(dataTable);
    }
  }

  function draw(dataTable) {
    var vis = new google.visualization.ImageChart(document.getElementById('chart'));
    var options = {
      chxs: '0,000000,11.5', //size of the pie
      chxt: 'x',
      chs: '360x265', //size of pie
      cht: 'p',
      chco: 'FF9900', //color of the pie
      chd: 's:9flxY',
      chdl: earn[0]+'|'+earn[1]+'|'+earn[2]+'|'+earn[3]+'|'+earn[4],
      chl: 'Jan|Feb|March|Apr|May',
      chma: '25',
      chtt: 'Earn',
      chts: '000000,14.5',
      bottom: '0', //word size of the pie
    };
    vis.draw(dataTable, options);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }
   draw(response.getDataTable());
  }
    /* document.body.addEventListener('touchmove', function(e) {
    // This prevents native scrolling from happening.
    we e.preventDefault();
    }, false);*/

  google.load("visualization", "1", {packages:["imagechart"]});
  google.setOnLoadCallback(onLoadCallback);
</script>
</body>
</html>

我尝试将我的第一个馅饼作为表格上的输入数据并将数组传递给html文件，以便馅饼可以检测到数组并绘制自身，但现在问题是它没有显示我输入的正确数据。它只会跟踪全局变量为（''）而不是我输入的那个。很抱歉长编码，我还是新的，这是我知道如何创建表的唯一方法。

Answer 1

我没有查看你的所有代码（有太多代码），但我确实注意到你这样做了：

webview.addEventListener('beforeload',function(e)
{
     earn[0] = textfield1.value;
    earn[1] = textfield2.value;
    earn[2] = textfield3.value;
    earn[3] = textfield4.value;
    earn[4] = textfield5.value;

   wbv1.evalJS("var earn[0] ='"+earn[0]+"';");
   wbv1.evalJS("var earn[1] ='"+earn[1]+"';");
   wbv1.evalJS("var earn[2] ='"+earn[2]+"';");
   wbv1.evalJS("var earn[3] ='"+earn[3]+"';");
   wbv1.evalJS("var earn[4] ='"+earn[4]+"';");
});

你不能在webview上调用evalJS，直到 load事件被触发后才能调用，evalJS仅在有一个首先加载了DOM的页面时才有效，所以这不会做任何事情。您只需要在load事件上调用evalJS。