Home>

i want to rewrite javascript

Target

You are making a target.
When I click the Add button, I want to add a working button and a delete button in the same row as the characters entered in the form.

I want to get two btn elements written in HTML for "working" and "deleting" and reflect them on the browser, but I don't know how to check them, and I'm having trouble.

How to dynamically rewrite html with Javascript! -Qiita
Look at the
I tried to rewrite it with innerHTML and tried and errored it, but this case doesn't seem to apply.

<! DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<title>ToDo list</title>
<link rel = "stylesheet" href = "css/styles.css">
</head>
<body>
 ToDo list 

    <input type = "radio" name = "radio1" value = "1" checked />
    <label for = "button-1">All</label>
    <input type = "radio" name = "radio1" value = "2" />
    <label for = "button-2">Completing</label>
    <input type = "radio" name = "radio1" value = "3" />
    <label for = "button-3">Working</label>

   ID comment status 
   Add new task 

  <p id = id_p>
      <input type = "text" value = "">
      <button type = "btn">Add</button>
  </p>
  <script>
    const btn = document.getElementById ('btn');
    btn.addEventListener ('click', () =>{
      const text = document.getElementById ('id_text'). value;
      const p1 = document.getElementById ('id_p');
      const p2 = document.getElementById ('id_p');
      const h2 = document.getElementById ('id_h2');
      // const button =<button type = "btn">Working</button>
      // const button = document.createElement ('btn');
      //btn.textContent = 'work in progress';
      //document.body.appendChild(button);
      document.body.insertBefore (document.createTextNode (text), h2);
    });

  </script>
</body>
</html>
. button {
  border-radius: 10px;
}
.button: hover {
  background-color: # 59b1eb;
}
.button: active {
  top: 3px;
  box-shadow: none;
}

.radiobutton label {
    padding: 0 0 0 24px;/* Label position * /
    font-size: 16px;
    line-height: 28px;/* Fit to button size * /
    display: inline-block;
    cursor: pointer;
    position: relative;
}
.radiobutton label: before {
    content: '';
    width: 14px;/* width of button * /
    height: 14px;/* button height * /
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb (0, 162, 255);
    border-radius: 50%;
}
.radiobutton input [type = "radio"] {
    display: none;
}
.radiobutton input [type = "radio"]: checked + label: after {
    content: '';
    width: 3px;/* width of mark * /
    height: 3px;/* Mark height * /
    position: absolute;
  top: 5.5px;
    left: 5.5px;
    background-color: #fff;
    border-radius: 50%;
}
javascript
  • Answer # 1 

    





ToDo list

    


     ToDo list 
    
        
        
        
        
        
        
        Click the  button to dynamically create text. 
         ID comment status 
         
         Add new task 
        
    
            
            
        
    
    
    

    How about this?

Related articles