當我在文本區域中書寫并點擊保存時，我的div出現問題，沒有顯示任何內容-有解無憂

當我在文本區域中書寫并點擊保存時，我的 div 出現問題，沒有顯示任何內容。當我在文本區域中書寫并點擊保存時，我的 div 出現問題，沒有顯示任何內容

 <!DOCTYPE html>
 <html>

 <head>
     <meta charset="utf-8">
     <meta name="Go from idea to action in seconds with wesam to do list">
    <title>wesam list to do</title>


     <script>
         function input() {
            var name = document.getElementById("text").Value
             document.getElementById("output").innerHTML = name;
             }
          </script>

         <style>
          #b {
             background-color: red;
         }
    
           #output {
             width: 100%;
             height: 200px;
             background-color: black;
             color: black;
         }
     </style>
 </head>

 <body>
    <form>

         <h1> Add your tasks </h1>
         <textarea id="text"></textarea>
         <button onClick="input()" id=" b " type="button "> save</button>
        <div id="output"></div>
   </body>

uj5u.com熱心網友回復：

嘗試這個。這段代碼有一些問題。我對更改添加了評論。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="Go from idea to action in seconds with wesam to do list">
  <title>wesam list to do</title>
  <script>
    function input(event) {
      //added preventDefault() to keep the page from reloading
      event.preventDefault();
      //changed Value to value - watch your case
      var name = document.getElementById("text").value;
      document.getElementById("output").innerHTML = name;
    }
  </script>

  <style>
    #b {
      background-color: red;
    }

    #output {
      width: 100%;
      height: 200px;
      background-color: black;
      /*changed the text color from black to white so you can see when the output is added*/
      color: white;
    }
  </style>
</head>

<body>
  <form>
    <h1> Add your tasks </h1>
    <textarea id="text"></textarea>
    <button onClick="input(event)" id="b" type="button"> save</button>
    <div id="output"></div>
  </form>
</body>

</html>

干杯!

uj5u.com熱心網友回復：

您的output元素同時具有黑色背景和黑色文本，因此您不會看到任何變化。
你錯過了一個</form>標簽。

看起來您正在嘗試創建任務串列，并且每次添加新任務并單擊“保存”時，它都會在正在進行的任務下添加一個新任務。

這是一個更新的示例，它使用了您可能會覺得有用的更現代的 JS 方法。相關檔案的鏈接在帖子的底部。

// First we cache all our elements
const task = document.querySelector('textarea');
const list = document.querySelector('ul');
const button = document.querySelector('button');

// Instead of inline JS we add an event listener to
// the cached button element.
button.addEventListener('click', handleClick, false);

// `focus` the cursor in the textarea
task.focus();

function handleClick() {

  // We create a new list item
  const item = `<li>${task.value}</li>`;

  // We add that to the list
  list.insertAdjacentHTML('beforeend', item);

  // Reset the textarea value
  task.value = '';

  // And refocus on it so we don't have to
  // manually click in it to write a new task
  task.focus();
}

button { background-color: red; color: white; }

<form>
  <h3>Add your tasks</h3>
  <textarea></textarea>
  <button type="button">Save task</button>
</form>

<ul></ul>

添加檔案

querySelector
模板/字串文字
insertAdjacentHTML
addEventListener

uj5u.com熱心網友回復：

有幾個問題：

您沒有關閉 HTML 中的表單標簽
您在輸入函式中將值的第一個字母寫為大寫
而且您可能沒有看，但您的按鈕背景顏色沒有出現，這是因為 HTML 中的 id 內有空格，只需洗掉這些空格，您就可以開始了。
并在輸出 div 中創建一個段落，并給他輸出的 id，然后將其存盤到一個變數中，然后執行 o.innerText o is you output paragraph = i.value i is your input
如果你想復制它，我已經向你的應用程式添加了一些功能，我沒有挖掘 -

// ES6 Syntax
const render = () =>{
    // Getting the value from HTML DOM to inputEl variable
    const inputEl = document.getElementById('text');
    // Getting the output paragraph from HTML DOM and storig it into output
    const outputEl = document.getElementById('output-text');
    // Rendering the inputEL value into outputEl
    outputEl.textContent = inputEl.value;
}

// ES5-- Syntax
function renderES(){
    // Getting the value from HTML DOM to inputEl variable
    const inputEl = document.getElementById('text');
    // Getting the output paragraph from HTML DOM and storig it into output
    const outputEl = document.getElementById('output-text');
    // Rendering the inputEL value into outputEl
    outputEl.textContent = inputEl.value;
}

@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');

:root{
    --primary-color: rgb(26, 26, 26);
    --secondary-color: white;
    --font-family: Nunito, sans-serif;
    --box-shadow:  rgb(0 0 0) 1px 1px 3px 0px inset, rgb(48 48 48 / 50%) -1px -1px 3px 1px inset;;
    --all-transition:transform ease-in-out 0.3s 0s;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: var(--font-family);
}

.main-content{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container{
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    width: 85%;
    height: 270px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary-color);
    flex-direction: column;
}

.container>h1{
    margin-top: 15px;
    color: var(--secondary-color);
    text-transform: uppercase;
}

form{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    width: 100%;
    height: 75%;
}

form>textarea{
    width: 95%;
    height: 30%;
    background-color: var(--primary-color);
    border: none;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    padding: 15px;
    color: var(--secondary-color);
}

#output{
    width: 95%;
    height: 40%;
    background-color: var(--primary-color);
    box-shadow: var(--box-shadow);
    color: var(--secondary-color);
    padding: 10px;
}

form>button{
    background-color: var(--primary-color);
    box-shadow: var(--box-shadow);
    width: 95%;
    height: 30px;
    border-radius: 10px;
    border: none;
    font-weight: bold;
    margin-bottom: 10px;
    color:var(--secondary-color); 
    transition: var(--all-transition);
    cursor: pointer;
}

/* NTH CHILD */
form>textarea::placeholder{
    color: var(--secondary-color);
}

/* Animations */
form>button:hover{
    transform: scale(1.02)
}

form>button:active{
    border: 1px solid var(--secondary-color);
}

<!doctype HTML>
<html>
    <head>
        <title>codedamn HTML Playground</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/style.css" />
    </head>
    <body>
        <div class="main-content">
            <div class="container">
                <h1> Add your tasks </h1>
                <form>
                    <textarea id="text" placeholder="Enter you task here.."></textarea>
                    <div id="output">
                        <p id="output-text"></p>
                    </div>
                    <button 
                    type="button" 
                    id="addtask-btn" 
                    onclick="render()">
                    Save
                    </button>
                <form>
            </div>
        </div>
        <script src="/script.js"></script>
    </body>
</html>

uj5u.com熱心網友回復：

看來你還沒有結束

<form>

標簽

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445177.html

標籤：javascript html css 网络

上一篇：帶邊距的導航欄不會設定為“0”

下一篇：快速集成華為 AGConnect 應用內訊息服務 - Android