如何使用JavaScript

时间:2015-06-23 17:02:43

标签: javascript loops

我刚刚继承了教堂通讯和教区居民联系信息收集的数据收集工具。包含在一长串数据点中的是轮询问题,他们将使用这些问题来确定要建立的移动应用程序,以使家长了解家庭事件。我没有多年编码,需要帮助优化我继承的东西。

此代码存在于单个HTML文件中,用户通过Web浏览器按预期访问该文件。

我有一个包含数据收集点和可选文本输入字段的表,用户可以使用这些字段输入收集的值。这些值取自各种输入并放入模板中。有45个这样的价值观。它们按如下方式排列:

    <table class="table1">
    <tr>
        <td class="col1"><input type="radio" id="noancheck" value="" name="a1" checked></td>
        <td class="col2"><input type="radio" id="ancheck" value="" name="a1"></td>
        <td class="col3">Android Device Identifier</td>
        <td class="col5">&android_id=</td>
        <td class="col4"><input type="text" id="android_id" size ="45" value="" placeholder="INSERT_ANDROID"></td>
    <tr>
        <td class="col1"><input type="radio" id="noecheck" value="" name="a2" checked></td>
        <td class="col2"><input type="radio" id="echeck" value="" name="a2"></td>
        <td class="col3">App Activity Type</td>
        <td class="col5">&etype=</td>
        <td class="col4"><input type="text" id="etype" size ="45" value="" placeholder="INSERT_EHEAD"></td>
    </tr>
    <tr>
        <td class="col1"><input type="radio" id="noicheck" value="" name="a3" checked></td>
        <td class="col2"><input type="radio" id="icheck" value="" name="a3"></td>
        <td class="col3">Apple Device Identifier</td>
        <td class="col5">&idfa=</td>
        <td class="col4"><input type="text" id="apple" size ="45" value="" placeholder="INSERT_APPLE"></td>
    </tr>
    <tr>
        <td class="col1"><input type="radio" id="nobcheck" value="" name="a4" checked></td>
        <td class="col2"><input type="radio" id="bcheck" value="" name="a4"></td>
        <td class="col3">Brand</td>
        <td class="col5">&brand=</td>
        <td class="col4"><input type="text" id="brand" size ="45" value="" placeholder="INSERT_BRAND"></td>
    </tr>
    <tr class="line">
        <td class="col1"><input type="radio" id="noccheck" value="" name="a5" checked></td>
        <td class="col2"><input type="radio" id="ccheck" value="" name="a5"></td>
        <td class="col3">Category</td>
        <td class="col5">&cat=</td>
        <td class="col4"><input type="text" id="model" size ="45" value="" placeholder="INSERT_MODEL"></td>
    </tr>
</table>

对于45个数据点中的每一个,声明的var类似于以下内容:

var android_out = document.getElementById('android_id').placeholder +     document.getElementById('android_id').value;
var ehead_out = document.getElementById('ehead').placeholder +    document.getElementById('ehead').value;
var apple_out = document.getElementById('apple').placeholder + document.getElementById('apple').value;
var brand_out = document.getElementById('brand').placeholder + document.getElementById('brand').value;
var model_out = document.getElementById('model').placeholder + document.getElementById('model').value;


var js_1 = 'List Item';
var js_2 = 'Inventory';
var js_3 = '\');';
var kvp_1 = '&';
var kvp_2 = '=';

单击按钮时,以下操作会执行并将收集的数据填充到textarea中显示的模板中:

document.getElementById("formoutput1").innerHTML = 'beginning of data collection template' +
    android_id_string +
    ehead_id_string +
    apple_id_string +
    brand_id_string +
    model_id_string+
    'end of data collection template';

document.getElementById('formoutput2').innerHTML = 'beginning of second template'
    android_id_kvp +
    ehead_id_kvp +
    apple_id_kvp +
    brand_id_kvp +
    model_id_kvp +
    'end of second template';

鉴于每次使用时最多收集45个数据点,代码相当长。如何优化?我很难将我所学到的关于循环的内容应用于此,并且非常欣赏我可以推断出的一个例子。

0 个答案:

没有答案