差分
このページの2つのバージョン間の差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
| p5js:03.html要素の取得と変更 [2021/07/10 15:38] – ↷ p5js:03.html要素の取得 から p5js:03.html要素の取得と変更 へページを名称変更しました。 baba | p5js:03.html要素の取得と変更 [2021/07/10 15:49] (現在) – baba | ||
|---|---|---|---|
| 行 3: | 行 3: | ||
| document.getElementById(" | document.getElementById(" | ||
| </ | </ | ||
| + | |||
| + | ===== html要素の取得 ===== | ||
| html内の要素を取得する簡単な方法は、javascriptで提供されているdocumentを利用するのが早いでしょう。javascriptでもよく利用しますが、p5jsでも同様にこのやり方で簡単にアクセスできます。draw関数内で直接idを指定して、その値をもらってくることができます。 | html内の要素を取得する簡単な方法は、javascriptで提供されているdocumentを利用するのが早いでしょう。javascriptでもよく利用しますが、p5jsでも同様にこのやり方で簡単にアクセスできます。draw関数内で直接idを指定して、その値をもらってくることができます。 | ||
| 行 43: | 行 45: | ||
| </ | </ | ||
| + | ===== 要素の変更 ===== | ||
| + | DOM要素の取得ができるようになりましたが、今度はDOM要素をp5js側から変更してみます。例えばテキストボックスに入力した文字列をそのまま別のテキストボックスに反映させてみます。p5.jsではDOM要素の設定には、 value()の引数に設定したい値を渡します。以下のプログラムを参照してください。 | ||
| + | < | ||
| + | <iframe src=" | ||
| + | </ | ||