简介：JS写一个文本同步框，来入门js。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>index</title> <link rel="stylesheet" href="/css/index.css"> </head> <body> <textarea class="input" name="" id="" cols="30" rows="10"></textarea> <br> <button>Run</button> <br> <pre></pre> <script type="module"> import { main } from "/js/index.js"; main(); </script> </body> </html>
index.css
textarea { width: 500px; height: 300px; background-color: lightblue; font-size: 24px; } pre { width: 500px; height: 300px; background-color: lightgrey; font-size: 24px; }
index.js
let input = document.querySelector(".input"); let run = document.querySelector("button"); let output = document.querySelector("pre"); function main(){ run.addEventListener ("click", function(){ // 点击run可以把input类中的内容显示出来的例子 let s = input.value; output.innerHTML = s; }); } export { main }
结果显示：
