2

私は JavaScript の初心者ですが、このフォーラムの Q&A を読んで多くのことを学びました。彼らが言うように、コーディングを学ぶ最良の方法は、他の人がどのようにコーディングしているかを見ることです!

javascript/html ベースのフォームを使用してワークフローを管理しようとしています。少し背景を説明すると、私は病理学者で、さまざまな患者サンプルのテキスト ベースのレポートを作成しています。出力の多くは、事前に作成された「定型コメント」の使用に非常に適しています。このようなコメントをさまざまなチェックボックスの値にリンクして、適切なボックスを簡単にチェックし、レポートをテキストエリア内に作成できるようにしたいと考えています。

たとえば、4 つの異なる組織部位があるとします。

[] サイト 1 [] サイト 2 [] サイト 3 [] サイト 4

それぞれ4つの異なる診断から1つを選択できます

[] 診断1 [] 診断2 [] 診断3 [] 診断4

サイトと診断を選択し、関連する値をテキストエリアに表示して、次の形式で出力できるようにしたいと考えています。

サイト1、生検:
- 診断1

サイト2、生検:
- 診断1

サイト3、生検:
- 診断3

サイト4、生検:
- 診断2

ここにフォームの始まりのいくつかがあります：

<body>
Duodenum sites <br/>
<form name=duodenum>
<input type="checkbox" name="duoDx1" id="duoDx1" /> DUO, NSA <br />
<input type="checkbox" name="duoDx2" id="duoDx2" /> DUO, _ PART <br />
<input type="checkbox" name="duoDx3" id="duoDx3" /> DUO, BULB <br />
<input type="checkbox" name="duoDx4" id="duoDx4" /> DUO, ULCER <br />
</form>

<p>&nbsp;</p>
Duodenum diagnoses <br/>    
<form name=duodiags>
<input type="checkbox" name="duoDiag1" id="duoDiag1" /> NSA <br />
<input type="checkbox" name="duoDiag2" id="duoDiag2" /> FOCAL ACTIVE <br />
<input type="checkbox" name="duoDiag3" id="duoDiag3" /> C A  <br />
<input type="checkbox" name="duoDiag4" id="duoDiag4" /> CELIAC <br />
</form>

<p>&nbsp;</p>

<p>&nbsp;</p>

<textarea id="outPut" placeholder="Diagnoses" cols=80 rows=20></textarea>

</body>

私のJavaScript：

var duoDxs = {
duoDx1: 'DUODENUM, BIOPSY: \n \n',
duoDx2: 'DUODENUM, ___ PART, BIOPSY: \n \n',
duoDx3: 'DUODENUM, BULB, BIOPSY: \n \n',
duoDx4: 'DUODENUM, "ULCER", BIOPSY: \n \n'
}

var duoDiags = {
duoDiag1: '     - NO SIGNIFICANT ABNORMALITIES \n',
duoDiag2: '     - FOCAL ACUTE INFLAMMATION\n',
duoDiag3: '     - CHRONIC AND ACTIVE DUODENITIS\n',
duoDiag4: '     - VILLOUS BLUNTING AND INCREASED INTRAEPITHELIAL LYMPHOCYTES (SEE 
COMMENT)\n'
}

var mytextbox = document.getElementById('outPut');


var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type === "checkbox" && inputs[i].name.indexOf('duoDx') > -1) {
inputs[i].onchange = function() {
if (this.checked) {
mytextbox.value = mytextbox.value + duoDxs[this.name] + duoDiags[this.name];
} else {
mytextbox.value = mytextbox.value.replace(duoDxs[this.name], "");
            }
        }
    }
}

JSFiddle

しかし、チェックボックスの値の2つの部分を取得して、テキストエリアに正しい方法で入力できないようです。サイトと診断の両方をループするようにテキストエリアにデータを入力する関数を作成する方法がわかりませんか? どんな助け/教育も大歓迎です!

ありがとう。CK

4

2 に答える 2

1

あなたの質問によると、サイトと診断をペアにしたいのですが、診断は数回使用できます。

サイト1、生検:
- 診断 1

サイト2、生検:
- DIAGNOSIS 1 << DIAGNOSIS 1 の 2 回目の使用法

サイト3、生検:
- 診断 3

サイト4、生検:
- 診断 2

この場合、チェックボックスは適していません。まず第一に、 1 つの診断に対して1つのサイトしかないように思われるので、a の方がはるかに適切です。次に、実際に入力を行った後に値をリセットする必要があります。<input type="radio">

サイトをコーヒーの自動販売機のようなものと考えてください。最初にクリームの量 (サイト) を選択し、次に砂糖の量 (診断) を選択すると、マシンが自動的にコーヒーを淹れて両方の値を未定にリセットするか、またはあなたがあなたのコーヒーを得るためにボタンを押す必要があります（またはマシンがあなたに与える個々のフレーバーを持つ飲み物は何でも）。

したがって、チェックボックスに 1 つのメカニズムのみを使用する代わりに、サイト用と診断用の 2 つを使用します。パートナーが既に割り当てられているかどうかを確認してください。パートナーがいる場合は、両方の値をテキストエリアに追加し、選択を削除します。

var choosenDiagnosis = null;
var choosenSite = null;

function testAndFill(){
    if(choosenDiagnosis !== null && choosenSite !== null){
        mytextbox.value += duoDxs[choosenSite.id]+ duoDiags[choosenDiagnosis.id] + "\n";
        choosenDiagnosis.checked = choosenSite.checked = false;
        choosenDiagnosis = choosenSite = null;
    }
}

var diagInputs = document.getElementsByName("duoDiag");
for (var i = 0; i < diagInputs.length; i++) {
    diagInputs[i].onchange = function() {
        choosenDiagnosis = this;
        testAndFill();       
    };
}
var diaxInputs = document.getElementsByName("duoDx");
for (i = 0; i < diaxInputs.length; i++) {
    diaxInputs[i].onchange = function() {
        choosenSite = this;
        testAndFill();       
    };

JSFiddle

于 2012-11-29T22:58:31.040 に答える
0

これを交換するだけ

var duoDiags = {
             duoDiag1: '     - NO SIGNIFICANT ABNORMALITIES \n',
             duoDiag2: '     - FOCAL ACUTE INFLAMMATION\n',
             duoDiag3: '     - CHRONIC AND ACTIVE DUODENITIS\n',
             duoDiag4: '     - VILLOUS BLUNTING AND INCREASED 
                       INTRAEPITHELIAL LYMPHOCYTES  (SEE COMMENT)\n'
}

と

var duoDiags = {
    duoDx1: '     - NO SIGNIFICANT ABNORMALITIES \n \n',
    duoDx2: '     - FOCAL ACUTE INFLAMMATION\n\n',
    duoDx3: '     - CHRONIC AND ACTIVE DUODENITIS\n\n',
    duoDx4: '     - VILLOUS BLUNTING AND INCREASED INTRAEPITHELIAL LYMPHOCYTES
                     (SEE COMMENT)\n\n'
}

フィドルをチェック

于 2012-11-29T23:04:02.283 に答える