Question

所以我正在测试这个东西，我可以在文本输入中写一些东西，然后将它渲染到页面。我有一个标识为user-text的文字输入和一个标识为apply-button的提交输入，以及一个目标<p>标记。实际上，您在文本输入中输入条目并单击按钮，它应该呈现给目标。但那不适合我。这是我的代码。

let userInput = document.querySelector('#user-text');
const applyButton = document.querySelector('#apply-button');
let userTarget = document.querySelector('#user-target');

applyButton.addEventListener('click', () => {
        userTarget.textContent = userInput.nodeValue;                     
});

<div>
    <div>
        <p><input type='text' id='user-text' placeholder="Type your day here."name='blogtext'><input type='submit' id='apply-button'value='Click to Apply'>


    </div>
    <div id='target'>
        <p id='user-target'></p>
    </div>
</div>

如果您有任何问题，请与我们联系。

Answer 1

您可以使用userInput.value从输入字段获取值。此外，您的第一个<p>代码也未关闭。

<body>
    <div>
        <div>
            <p><input type='text' id='user-text' placeholder="Type your day here."name='blogtext'><input type='submit' id='apply-button'value='Click to Apply'>
            
           
        </div>
        <div id='target'>
            <p id='user-target'></p>
        </div>
    </div> 

    <script type='text/javascript'>
        let userInput = document.querySelector('#user-text');
        const applyButton = document.querySelector('#apply-button');
        let userTarget = document.querySelector('#user-target');
        
        applyButton.addEventListener('click', () => {
                userTarget.textContent = userInput.value;                     
        });
    </script>
</body>

Answer 2

当您执行点击功能时，＆＃34; nodeValue＆＃34;为什么你试图将值设置为html而不是来自UI。

＆＃13;

<body>
    <div>
        <div>
            <p><input type='text' id='user-text' placeholder="Type your day here."name='blogtext'><input type='submit' id='apply-button'value='Click to Apply'>


        </div>
        <div id='target'>
            <p id='user-target'></p>
        </div>
    </div> 

    <script type='text/javascript'>
    console.log('called');
        let userInput = document.querySelector('#user-text');
        const applyButton = document.querySelector('#apply-button');
        let userTarget = document.querySelector('#user-target');

        applyButton.addEventListener('click', () => {
                userTarget.textContent = userInput.value;                     
        });
    </script>
</body>

＆＃13;

Answer 3

＆＃13;

let userInput = document.querySelector('#user-text');
const applyButton = document.querySelector('#apply-button');
let userTarget = document.querySelector('#user-target');

applyButton.addEventListener('click', () => {
        userTarget.innerHTML = userInput.value;                     
});

＆＃13;

<div>
    <div>
        <p><input type='text' id='user-text' placeholder="Type your day here."name='blogtext'><input type='submit' id='apply-button'value='Click to Apply'>


    </div>
    <div id='target'>
        <p id='user-target'></p>
    </div>
</div>

＆＃13;

获取textarea value并使用innerHTML将其放入您的元素中。

如何获取用户文本输入并将其呈现到页面上的元素？

3 个答案: