0

我希望使用以下代码发生的情况是，当用户检查多个数据中心然后选择一种更改类型时，它将使用包含用户选择的数据中心的唯一字符串语句自动刷新描述和影响文本区域。

有人可以告诉我我做错了什么吗？

JS：

function updateDescImpact() {
    var changeSel = document.changeform.change_type;
    var ChangeType = (changeSel.options[changeSel.selectedIndex].value);
    var description = " ";
    var impact = " ";
    var data_center = "";
    var inputs = document.getElementsByTagName('input');
    for (var x = 0; x < inputs.length; x++) {
        {
            if (inputs[x].type == "checkbox" && inputs[x].name == 'data_center[]') {
                if (inputs[x].checked == true) {
                    data_center += inputs[x].value + ',';
                }
            }
        }
        if (/,$/.test(data_center)) {
            data_center = date_center.replace(/,$/, "")
        }
        if (ChangeType == "Filer Changes") {
            description = "This is the Filer Change Description for $('data_center')";
            impact = "This is the Filer Changes impact statement for $('data_center')";
        } else if (ChangeType == "DNS Changes") {
            description = "This is the DNS Change Description for $('data_center')";
            impact = "This is the DNS Changes impact statement for $('data_center')";
        } else {
            description = "";
            impact = "";
        }
        document.changeform.description.value = description;
        document.changeform.impact.value = impact;
    }

HTML：

<form action="" id="changeform" method="post" name="changeform">
    <input type="submit" value="submit change">
    <table>
        <tr valign="top">
            <td><strong>Data Center</strong></td>
            <td><input name="data_center[]" type="checkbox" value="zone1">Zone1
            <input name="data_center[]" type="checkbox" value=
            "Zone2">Zone2</td>
        </tr>
        <tr valign="top">
            <td><strong>Change Type</strong></td>
            <td><select id="change_type" name="change_type" onchange=
            "updateDescImpact()">
                <option value="DNS Changes">
                    DNS Changes
                </option>
                <option value="Filer Changes">
                    Filer Changes
                </option>
            </select></td>
        </tr>
        <tr valign="top">
            <td><strong>Description</strong></td>
            <td>
            <textarea cols="50" id="description" name="description" rows="10">
This text needs to be updated
    </textarea>
            </td>
        </tr>
      <tr valign="top">
            <td><strong>Service Impact</strong></td>
            <td>
            <textarea cols="50" id="impact" name="impact" rows="10">
This text needes to be updated
</textarea></td>
        </tr>
    </table>
</form>
4

1 回答 1

0

只需对您想对字符串做什么有一个最小的了解，一旦您掌握了它，我就整理了以下内容：

function updateDescImpact() {
    // declaring all the variables, separating them with commas, at once.
    // retrieves the element:
    var changeSel = document.getElementById('change_type'),
        // defines the various default messages:
        changes = {
            'DNS': {
                'impact': 'This is the DNS Change impact statement for $("data_centre")',
                'description': 'This is the DNS Change Description for $("data_center")'
            },
                'Filer': {
                'impact': 'This is the Filer Changes impact statement for $("data_centre")',
                    'description': 'This is the Filer Change Description for $("data_center")'
            }
        },
        ChangeType = (changeSel.options[changeSel.selectedIndex].value),
        // creates an array:
        data_center = [],
        inputs = document.getElementsByTagName('input');

    for (var x = 0, len = inputs.length; x < len; x++) {
        {
            if (inputs[x].type == "checkbox" && inputs[x].name == 'data_center[]') {
                if (inputs[x].checked === true) {
                    // adds the checkbox-values to the array:
                    data_center.push(inputs[x].value);
                }
            }
        }
        // creates another key for the 'changes' object,
            // the value of which is determined by whether the array contains values,
            // if it *does*, then those values are joined together using the given string,
            // if *not*, then the value is an empty string.
        // in both cases the value is followed by a period.
        changes.data_centers = (data_center.length > 0 ? ': ' + data_center.join(', ') : '') + '.';
        document.getElementById('description').value = changes[ChangeType].description + changes.data_centers;
        document.getElementById('impact').value = changes[ChangeType].impact + changes.data_centers;
    }
}

JS 小提琴演示。

在下一部分中，我将尝试解释我所做的更改，但简单、核心的前提是尽量减少您正在做的工作量，并减少错误蔓延的范围。

您在哪里使用：

document.changeform.change_type;

相反，我选择使用：

var changeSel = document.getElementById('change_type');

这是因为使用id相关元素的 s 比使用两个 s 在 DOM 中导航要快id，特别是因为不能保证当元素被id用作全局变量而不被声明时，它会被它识别。它几乎可以在任何地方工作，是的，但它不是 JavaScript 中的标准或指定行为，最初是在 Internet Explorer 中提供的一种便利。但是，不保证将来会提供这种便利。

此外， an 在id中是（并且必须是）唯一的，因此使用twodocument是没有意义的，当一个人会做得很好时。

使用一个对象来包含您（可能）想要使用的各种替代字符串，这是为了减少对多个if//语句的需要else if。else并且使将来更新该功能以解决新的选项和要求变得更加容易。如上所述，这是为了最大限度地减少您必须做的工作量（现在和将来）。

你用过的地方：

if (/,$/.test(data_center)) {
    data_center = date_center.replace(/,$/, "")
}

相反，我选择使用数组：

data_center = [],

这使我们可以避免使用正则表达式，虽然在这种情况下很简单，但并非总是如此，而且对于最终结果来说，这比必要的要困难得多。而数组可以使用.join()将数组元素与定义的字符串连接在一起的方法（稍后使用），并且不会导致尾随逗号。

我还在getElementById()最后两行中使用了将各种字符串/值分配给相关元素。出于与上述相同的原因。

于 2013-07-10T18:40:47.107 回答