Home>
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%;
}
-
Answer # 1
Related articles
- javascript - i want to rewrite the contents of the tag
- i want to run javascript only the first time
- javascript - i want to make roulette with html and css
- javascript - in the accordion menu, i want to manage to open all of them when i open one
- javascript - i want to loop setinterval
- javascript - i want to be able to edit todo with vuejs
- javascript - i want to get a marginleft
- javascript - i want hyperapp v1 (1x) to work on ie8
- rewrite nested associative array values in javascript
- javascript - i want to send a token with vue
- javascript - i want to do ban with discord js
- javascript - i want to write a code that puts out a leap year in js
- i want to rewrite c ++ printf to cout
- javascript - i want to display google map in the view
- javascript - i want to use what i put in the value of the array
- javascript - i want to output a video on the web
- javascript - i want to disable the selection box
- i want to get the coordinates of the javascript div area
- i want to get the coordinates of the javascript div area 2
- javascript - i want to put a variable value in css
Trends
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- python - you may need to restart the kernel to use updated packages error
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- python 3x - typeerror: 'method' object is not subscriptable
- javascript - how to check if an element exists in puppeteer
- xcode - pod install [!] no `podfile 'found in the project directory
- i want to call a child component method from a parent in vuejs
- vuejs - [vuetify] unable to locate target [data-app] i want to unit test to avoid warning
How about this?