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、関連する要素の を使用すると、2 つの を使用して DOM をナビゲートするよりも高速になるためです。特に、要素が宣言されずにグローバル変数として使用された場合id、その要素が認識されるという保証がないためです。idはい、ほぼどこでも機能しますが、これは JavaScript の標準または指定された動作ではなく、最初は Internet Explorer で提供された便利なものでした。ただし、この利便性が将来的に提供されるとは限りません。

また、 anidは 内で一意である (そして一意でなければならない)ため、1 つが完全に機能する場合にtwodocumentを使用しても意味がありません。

オブジェクトを使用して、使用したい (かもしれない) さまざまな代替文字列を含めます。これは、複数のif/ else if/elseステートメントの必要性を減らすためです。また、将来的に新しいオプションや要件に対応するために関数を更新するのがいくらか容易になります。上で述べたように、これはあなたがしなければならない作業の量を最小限に抑えるためです (現在および将来)。

使用した場所:

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

代わりに、配列を使用することにしました。

data_center = [],

これにより、正規表現を使用する必要がなくなります。この場合は単純でしたが、常にそうであるとは限らず、完成した結果に必要以上に難しい正規表現を使用する必要がなくなります。一方、配列は.join()、定義された文字列と配列要素を結合するメソッド (後で使用) を使用でき、末尾のコンマにはなりません。

またgetElementById()、最後の 2 行で、関連する要素にさまざまな文字列/値を割り当てるために使用しました。上で概説したのとまったく同じ理由で。

于 2013-07-10T18:40:47.107 に答える