This question already has answers here:
How do I make an HTML button not reload the page
(10 answers)
Closed 1 year ago.
I try to hide an Fieldset initially and then show it with an button click.
But its just show me the text for a second and then its gone again.
I tried to do it also with visibility attribute but I got the same problem.
Is there something I do wrong?
function myFunction() {
var f1 = document.getElementById("f1");
f1.style.display = "block";
}
#f1 {
display: none;
}
#btn_submit {
width: 23em;
height: 4em;
font-weight: bold;
background-color: #C6C5C5;
}
<body style="background-color:#A0A0A0;">
<form action="" method="post">
<br>
<div class="a">
<h1>onfiguration / Configuration</h1><br>
<p>
<font size="6">(9) Relais 1 / Relay 1</font><br>
</p>
<fieldset id="f1"><br>
<font size="4">9.1 Modus / Mode:</font><br><br>
</fieldset>
<button onclick="myFunction()" id="myBtn">Read more</button>
</body>
You forgot to close <form> tag.
Another thing, You've set button inside a form element which works as a submit button by default. You've to provide the type="button" to prevent form submission.
Also, Properly put <meta> tags in <head> and style and script tag before and after body respectively.
<!DOCTYPE html>
<html>
<head>
<title>Konfiguration / Configuration</title>
<meta charset="UTF-8">
<link rel="icon" href="data:;base64,=">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
#f1 {
display: none;
}
#btn_submit {
width: 23em;
height: 4em;
font-weight: bold;
background-color: #C6C5C5;
}
</style>
<body style="background-color:#A0A0A0;">
<form action="" method="post">
<br>
<div class="a">
<h1>onfiguration / Configuration</h1><br>
<p>
<font size="6">(9) Relais 1 / Relay 1</font><br>
</p>
<fieldset id="f1"><br>
<font size="4">9.1 Modus / Mode:</font><br><br>
</fieldset>
<button onclick="myFunction()" id="myBtn">Read more</button>
</div>
</form>
<script>
function myFunction() {
var f1 = document.getElementById("f1");
f1.style.display = "block";
}
</script>
</body>
</html>
Related
I created a To-do List, but I can't add a close tag to a list element in js. When I add the marked 5 lines of code in js my code doesn't work and I can't add a new list. Can you help me? Why it doesn't work, I didn't understand. I'm missing something..
I created a To-do List, but I can't add a close tag to a list element in js. When I add the marked 5 lines of code in js my code doesn't work and I can't add a new list. Can you help me? Why it doesn't work, I didn't understand. I'm missing something..
let form = document.querySelector('#form');
let reset = document.querySelector('#reset');
let myList = document.querySelector('#myList');
let text = document.querySelector('#text');
let submit = document.querySelector('#submit');
submit.addEventListener('click', function(e) {
e.preventDefault();
let liDOM = document.createElement('li')
liDOM.className = 'list-group-item'
liDOM.innerHTML = `${text.value[0].toUpperCase()}${text.value.slice(1)}`;
myList.appendChild(liDOM);
// If I add this 5 code lines, it doesn't work. WHY?
var span = document.createElement('span');
var text = document.createElement('\u00D7');
span.className = 'close';
span.appendChild(text);
liDOM.appendChild(span);
});
myList.addEventListener('click', function(item) {
if (item.target.tagName = 'li') {
item.target.classList.toggle('checked');
}
})
let counter = 0;
function myFunction() {
while (counter < myList.childElementCount) {
myList.removeChild(myList.firstChild);
}
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<form id="form">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8 mt-5">
<div class="card">
<div class="card-body">
<div class="input-group">
<input class="form-control" type="text" id="text" placeholder="What will you do today?">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="submit">Ekle</button>
<button onclick="myFunction()" type="submit" id="reset" class="btn btn-outline-secondary">Sıfırla</button>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">My List</div>
<ul id="myList" class="list-group list-group-flush">
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
First of all good job, this was in nearly working condition and looks great.
There seemed to be a few minor problems with the implementation.
First, it is unusual/counterintuitive to have 2 different buttons each with type submit.
I would assume only first one should have type='submit'. The second one for presumably clearing the input should be type='button'. I also think they should have different styles to help warn the user that they have very different functionality.
Also, since the button has a submit functionality you don't need to also add an onclick functionality. It is very good to have an on submit functionality on the form and the single button with type='submit' as this allows the enter key to add a ToDo item.
Finally, the main focus of your problem was just that the text variable was already defined and you can't create an Element with the type × that is not an HTML type. See all the HTML elements on Mozilla Development search your favorite Search Engine for MDN Mozilla and within that search HTML for a list of current Legal HTML elements. It is very unlikely that an element will not be a word or abbreviation of some kind so that immediately tipped me off that: × was not an element tag that you can create they're more like (div, span, script, p, b, i). I think you meant for that to be the content of another span element that you wanted to create. Once you solved those 2 issues your code works!
I would just recommend that you append the × directly into the text because that's unfortunately the only element that doesn't fit. If not maybe you're going for a flex-box justify-content: space-between type thing where the × should always be on the right and the TODO on the left.
In that case you want the resulting HTML to be like:
<div style='display: flex; justify-content: space-between; align-items: center'>
<div>To Do text... I need to do stuff</div>
<button onclick='toggleComplete(12)'>×</button>
</div>
Keep in mind that for accessibility all clickable elements should really be buttons. If you need yo can cut back on the styling of this button and create a non-button-button class that resets all button specific styles to help you make it still look exactly how you want but work with screen readers.
let form = document.querySelector('#form');
let reset = document.querySelector('#reset');
let myList = document.querySelector('#myList');
let text = document.querySelector('#text');
let submit = document.querySelector('#submit');
submit.addEventListener('click', function(e) {
e.preventDefault();
let liDOM = document.createElement('li')
liDOM.className = 'list-group-item'
liDOM.innerText = `${text.value[0].toUpperCase()}${text.value.slice(1)}`;
myList.appendChild(liDOM);
// This was not working before because `text`
// was already defined above as `#text`
var newSpan = document.createElement('span');
// NOTE: for accessibility this must be a button.
const closer = document.createElement('span');
// this is probably what you meant to do... but
// note this needs some CSS love and the x itself doesn't work if you click
// on it so maybe just add it to the inner text instead:
// liDOM.innerText = `${text.value[0].toUpperCase()}${text.value.slice(1)} ×`;
closer.innerText = '×'
// perhaps add a special class here that gives it a red color
// perhaps only add the event listener to this button
newSpan.className = 'close';
newSpan.appendChild(closer);
liDOM.appendChild(newSpan);
});
myList.addEventListener('click', function(item) {
if (item.target.tagName = 'li') {
item.target.classList.toggle('checked');
}
})
let counter = 0;
function myFunction() {
while (counter < myList.childElementCount) {
myList.removeChild(myList.firstChild);
}
}
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<form id="form">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-8 mt-5">
<div class="card">
<div class="card-body">
<div class="input-group">
<input class="form-control" type="text" id="text" placeholder="What will you do today?">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="submit" id="submit">Ekle</button>
<button onclick="myFunction()" type="submit" id="reset" class="btn btn-outline-secondary">Sıfırla</button>
</div>
</div>
</div>
</div>
<div class="card mt-3">
<div class="card-header">My List</div>
<ul id="myList" class="list-group list-group-flush">
</ul>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
So a little lost here, I'm not sure how to approach this, I've done the HTML and CSS but not sure how to do it in JS.
My HTML:
<!doctype html>
<html lang="en">
<head>
<title> Task 1 </title>
<meta charset="utf-8">
<script src="DomNodes.js"></script>
<style>
#output {
border: blue 5px solid;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;
width: 50%;
}
#output p {
padding:10px;
border: black 1px dashed;
}
</style>
</head>
<body>
<h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2>
<p> Type in text below, click add to add as paragraph. <button id="add"> ADD </button> </p>
<textarea id ="input" rows="10" cols="60">
</textarea><br>
<button id="delete">Delete Last Paragraph</button>
<br><br>
<h2> Added Paragraphs </h2>
<div id="output">
</div>
</body>
</html>
This is the code with little explain
<!doctype html>
<html lang="en">
<head>
<title> Task 1 </title>
<meta charset="utf-8">
<!--<script src="DomNodes.js"></script>-->
<script>
function myFunction() {
//get input user
var userInput=document.getElementById("input").value;
//clean text area
document.getElementById("input").value="";
//create paragraph
var para = document.createElement("p");
//assign value ->user input
var node = document.createTextNode(userInput);
//assign text at paragraph
para.appendChild(node);
//assign paragraph at div tag
var element = document.getElementById("output");
element.appendChild(para);
}
function remove_LastChild() {
//get div output
var select = document.getElementById('output');
//control if there are child into output div
if (select.childElementCount>0){
//select last paragraph and remove it
select.removeChild(select.lastChild);
}
else{
alert("Tehere are not paragraph!");
}
}
</script>
<style>
#output {
border: blue 5px solid;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px;
width: 50%;
}
#output p {
padding:10px;
border: black 1px dashed;
}
</style>
</head>
<body>
<h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2>
<p> Type in text below, click add to add as paragraph. <button id="add" onclick="myFunction()"> ADD </button> </p>
<textarea id ="input" rows="10" cols="60">
</textarea><br>
<button id="delete" onclick="remove_LastChild()">Delete Last Paragraph</button>
<br><br>
<h2> Added Paragraphs </h2>
<div id="output">
</div>
</body>
</html>
I hope this hel you
This question already has answers here:
css javascript style sheet disabled?
(3 answers)
Closed 4 years ago.
I have an question about modify the tag type attribute problem. In my case, I want to dynamicly change the type to make it work or disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style r = "1" type = "text/css">
h1 {
font-size: 20px;
}
</style>
<style r = "2" type = "not work">
h1 {
font-size: 40px;
}
</style>
</head>
<body>
<script>
var style1 = document.querySelector('[r="1"]')
var style2 = document.querySelector('[r="2"]')
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "style1.type='text/css';style2.type='not work'">
<input type="button" value="make text 40px" onclick = "style2.type='text/css';style1.type='not work'">
</body>
</html>
So here's the example : click me
It works on chrome, but nor work in ie11, safari. Anybody can help ? Thanks a lot.
Addition: What i am doing is to change page style depends on some condition, say: language. In some reason I cant use mvvm framework.
That's not how you do it, actually. It's bad practice to change styles this way. It's better to change just one element style and not whole page style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type = "text/css">
h1 {
font-size: 20px;
}
</style>
</head>
<body>
<script>
function changeStyle(fontSize) {
var heading = document.querySelector('h1')
heading.style.fontSize = fontSize;
}
</script>
<h1>this text can be either 20px or 40px</h1>
<input type="button" value="make text 20px" onclick = "changeStyle('20px')">
<input type="button" value="make text 40px" onclick = "changeStyle('40px')">
</body>
</html>
Here is the following code which is not working to show error message when submitted.
The problem is that the error message is not displayed properly when clicked once but if you give multiple clicks it works.
Help will be appreciated.
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>JavaScript form validation - checking all letters</title>
<style type="text/css">
li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}
</style>
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Enter your Name and Submit</h2>
<form name="form1" action="#">
<ul>
<li>
Code:
</li>
<li id="myList">
<input type='text' name='text1'/>
<p id="error"></p>
</li>
<li class="rq">
*Enter alphabets only.
</li>
<li> </li>
<li>
<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1)" />
</li>
<li> </li>
</ul>
</form>
</div>
<script type="text/javascript">
function allLetter(inputtxt) {
var letters = /^[A-Za-z]+$/;
if(inputtxt.value.match(letters)) {
document.getElementById("error").innerHTML="error here";
return false;
} else {
document.getElementById("error").innerHTML="success";
return true;
}
}
</script>
</body>
</html>
Your problem and solution is quite simple.
When you click the form button, the form automatically submits itself and that's why you see nothing.
Add this to your button code so you can prevent the default functionality of the submit input:
<input type="submit" name="submit" value="Submit" onclick="allLetter(document.form1.text1);return false" />
That should solve it:
You should to use event.preventDefault method to prevent the page refresh.
So, your function should look like this:
function allLetter(event) {
event.preventDefault();
var letters = /^[A-Za-z]+$/;
if (document.form1.text1.value.match(letters)) {
document.getElementById("error").innerHTML="error here";
//return false;
} else {
document.getElementById("error").innerHTML="success";
return true;
}
}
It should be called in the following way:
<input type="submit" name="submit" value="Submit" onclick="allLetter(event)" />
I am currently working in jsp. I need to get the value of input on text box while a buttton is clicked. My code is given below. While running it produces output which disappears in seconds. I need a stable output (text in textbox) when button is clicked.
<html>
<head>
<style type="text/css">
body {
background-color: #cccccc;
}
tab{ padding-left: 4em; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<form>
<title>Businesscard Management</title>
</head>
<body>
<br><br><br><br><br><br>
<h2> Search : <input type="text" class="textbox" size="75" id="myText" autofocus="true" name="searchinput"/></h2>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("myText").value="ertyu";
}
</script>
</body>
</html>
First of all you have some errors in your code markup. You have just one opened <form> tag inside of <head> tag. Also I noticed that you're trying to set styles for tab but this is not appropriate tag. And you forgot to close </html> tag. Be careful when writing code, better to use code indention for better reading and it could prevent plenty of errors.
regarding your code:
<html>
<head>
<style type="text/css">
body {
background-color: #cccccc;
}
tab {
padding-left: 4em;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Businesscard Management</title>
</head>
<body>
<br><br><br><br><br><br>
<form action="/">
<h2> Search : <input type="text" class="textbox" size="75" id="myText" autofocus="true" name="searchinput"/></h2>
<input type="button" onclick="myFunction()" value="Try it"/>
<p id="demo"></p>
</form>
<script>
function myFunction() {
document.getElementById("myText").value = "ertyu";
}
</script>
</body>
</html>
I've move <form> tag to it desired position. And replaced <button> with <input type="button"> to prevent form submitting. So regarding your code when you press Try it button you will assign "ertyu" text to the input value. And if you want to get value of it, just use document.getElementById("myText").value