I have a problem with my div when I write in the text area and hit save nothing is show up-CodePudding

I have a problem with my div when I write in the text area and hit save nothing is show up. I have a problem with my div when I write in the text area and hit save nothing is show up

 <!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>

CodePudding user response：

It seems that you haven't ended the

<form>

tag

CodePudding user response：

Try this. There were a few issues with this code. I added comments to the changes.

<!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>

Cheers!

CodePudding user response：

Your output element has both a black background, and black text, so you won't see anything change.
You were missing a </form> tag.

It looks like you're trying to create a list of tasks, and each time you add a new task, and click "save" it adds a new task under the proceeding ones.

Here's an updated example that uses more modern JS methods that you might find useful. Links to the relevant documentation are at the bottom of the post.

// 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>

Addition documentation

CodePudding user response：

There are couple problem:

You didn't close the form tag in HTML
you write the first letter of value as capital in input function
And you may did not look but your button background color is not coming that is because there is spaces inside the id in HTML just remove those and you're good to go.
And make a paragraph inside the output div and give him the id of output and than stor that into a variable and do o.innerText o is you output paragraph = i.value i is your input
I have added some features to to your application if you want to copy it i do not mined -

// 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 >
            <div >
                <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>

CodePudding user response：

Check your code first, probably there is a logical error as @Eshan Shekhaji said, and then let us know