1

私は、ユーザーがテキスト文字列を入力し、HTML にラップしてページに出力できるようにする小さな js スクリプトを作成しようとしています。

私はphpでこれを行う方法を知っていますが、そのような単純なアクションには少しやり過ぎのように思えます。さらに、私は常に何か新しいことを学びたいと思っています.

私は使って遊んでいましdocument.myform.submit();たが、フォームの値を変数に送信し、その変数を使用して画面に出力する方法がわかりませんでしたdocument.write();

どうすればこれを行うことができますか？

ここで問題の jsfiddle を作成しました - http://jsfiddle.net/pudle/axcLz/

4

1 に答える 1

1

それを行うには多くの方法があります。それらの1つを示すコードは次のとおりです。

document.getElementById("myform").onsubmit = function (event) {
    var link = document.getElementById("mylink");
    var textField = document.getElementById("text");
    link.href = textField.value;
    textNode = document.createTextNode(textField.value);
    if (link.hasChildNodes()) {
        link.removeChild(link.lastChild);
    }
    link.appendChild(textNode);
    event.preventDefault();
};

jsfiddle: http://jsfiddle.net/TMJGH/5/

作業を簡単にするために、 a要素にid 属性を追加しました。

最初の行は、フォームで「onsubmit」イベントを処理する関数を変更したいことを示し、次にその関数を定義します。「イベント」引数は、最終行で.preventDefault()を呼び出すためだけに使用されます。これは基本的に、フォームが実際に送信されないようにすることを意味します。

JavaScript コードで DOM 要素にアクセスする必要があるため、document.getElementByIdを使用しました。次に、 href 属性をtextFieldの値に設定します。実際のリンク テキストを変更するために、 textFieldの値を使用して新しいテキスト ノードを作成しました(textNode.innerHTML を使用することは可能ですが、テキスト フィールドに挿入された場合に HTML コードをエスケープしません)。次に、a要素に既にテキストが含まれているかどうかを確認します。含まれている場合は、削除する必要があります。最後に、テキスト要素を新しい子として a 要素に追加します。

ノード内にさらに HTML ノードを追加したい場合は、 document.createElement('element name')で簡単に作成し、それらをlinkに追加できます。また、jQuery を使用すると DOM を操作しやすくなることにも言及する必要があります。

于 2013-05-11T23:16:37.787 に答える