DEMO

Question

我有一个输入，我输入一个小的自然数，例如4，然后点击后输入它创建一个特殊的方形表（尺寸等于用户输入的数字）。在桌子后面还有一个按钮（对于这个玩具示例来说这不应该太重要）。

var obj = {
    "Reads":1721745,
    "Present":1,
    "RankMetric":0.397851,
    "organism_labels":"klebsiella_oxytoca"
},{
    "Reads":66529,
    "Present":1,
    "RankMetric":0.609935,
    "organism_labels":"staphylococcus_aureus"
},{
    "Reads":45563,
    "Present":1,
    "RankMetric":0.505084,
    "organism_labels":"legionella_longbeachae"
},{
    "Reads":83471,
    "Present":1,
    "RankMetric":0.669884,
    "organism_labels":"enterobacter_aerogenes"
}, {
    "Reads":1309077,
    "Present":1,
    "RankMetric":0.688673,
    "organism_labels":"pseudomonas_aeruginosa"
}

Plunker版本：

https://plnkr.co/edit/DWYEbllT2ynihoTreEDY?p=preview

我想要的是什么：在输入数字之前，用户可以看到文本“表格：”以及按钮。但是，我希望在用户输入之前这些部分不存在。

我不想要的东西：我不想通过函数createTable（...）创建文本“Table：”以及一个愿望中的Button。这将导致这个玩具示例的理想解决方案，但不是我正在进行的更复杂项目的理想解决方案。在“Table：”和Button之间创建一个div部分是理想的，并且有一种技术可以在用户输入数字时显示div部分。

谢谢！

Answer 1

所以createTable函数正在返回：

Uncaught TypeError: Cannot set property 'innerHTML' of null

输入中onChange函数的第3个参数试图最终设置传递给它的内容的innerHTML。因此，如果您将其更改为tableDiv，请执行以下操作：

<input type="text" name="numberCities" onChange='createTable(this.value,this.value,"tableDiv")'>

然后它适合我。

DEMO

Answer 2

奇怪的玩具示例，很难在不知道发生了什么的情况下给出一个好的答案，以及为什么我们要写简单的JS，但是：

将<div id="tableHolder" style="display: none;">放在表格之前：</div>放在</button>之后。

然后在你的onchange中，你可以这样做：

createTable(...); showHolder(this.value);

在你的剧本中：

function showHolder(value) {
  var s = document.getElementById('tableHolder').style;
  var newD =  value%1 == 0 && value > 0 ? 'block' : 'none';
  if(s.display != newD) {
   s.display = newD
  }
}

使div部分显示为基于事件

2 个答案:

DEMO