JS的文本同步框

极客李华

已于 2022-10-15 20:58:18 修改

阅读量251

点赞数 1

分类专栏： JS学习之旅文章标签： javascript 前端 html

于 2022-10-11 23:02:01 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/127273172

版权

JS学习之旅专栏收录该内容

55 篇文章 4 订阅

订阅专栏

简介：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
}

结果显示：
在这里插入图片描述