<!DOCTYPE html>
<html>
<head>
<title>Library Project</title>
<link rel="stylesheet" href="styles.css">
<script src="practice.js" defer></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Library</h1>
</div>
<div class="bottomContainer">
<div class="button">
<button id="newBook" onclick="displayCard();">New Book</button>
</div>
<div class="cardsContainer">
<div class="window">
<form action="">
<div class="close-btn">
<p>Add A New Book</p>
<button class="x">×</button>
</div>
<input type="text" placeholder="Title" id="title" value="">
<input type="text" placeholder="Author" id="author" value="">
<input type="text" placeholder="Pages" id="pages" value="">
<button class="submit" onclick="createDiv();">Submit</button>
</form>
</div>
</div>
<div class="cards"></div>
</div>
</div>
// Button Stuff //
let newBook = document.getElementById("newBook");
let cardsContainer = document.querySelector(".cardsContainer");
let x = document.querySelector(".x");
// Brings up & closes form window //
function displayCard() {
cardsContainer.style.display = "flex";
}
// Creates Div //
function createDiv() {
alert("working");
let cards = document.querySelector(".cards");
let strong = document.createElement("strong");
strong.textContent = "strong";
cards.append(strong);
};
I have two buttons. The first button brings up a modal that has a "Submit" button on it. When I press "Submit" I want to add the word "Strong" to the div ".cards". The button alerts "working" and then strong appears on the screen but when I click off the alert, the word "strong" disappears. I tried changing the code around so that when I press the "New Book" button the word strong appears and stays, however, if I try to also have the modal come up after, the word "strong" disappears again. I have no idea what I'm doing wrong and I just need to be able to append stuff after hitting the "Submit" button.
Related
<!DOCTYPE html>
<html>
<body>
<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
</body>
</html>
I got this code from w3schools website, here is the link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_copy_clipboard
I'm super beginner, can u please help me create multiple boxes so which ever box you click on it will copy to clipboard that text?
I tried duplicating the same code and changed the myInput but it doesn't seem to work!
You need to wrap each box within a div. Then, you need to pass event object to onclick function of each button. Since the text input is immediately followed by a button, you can use previousElementSibling method, which selects the previous sibling of it (which is input).
function myFunction(e) {
var copyText = e.target.previousElementSibling;
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
<!DOCTYPE html>
<html>
<body>
<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
<div>
<input type="text" value="Hello World" class="myInput">
<button onclick="myFunction(event)">Copy text</button>
</div>
<div>
<input type="text" value="Input 2" class="myInput">
<button onclick="myFunction(event)">Copy text</button>
</div>
<div>
<input type="text" value="Input 3" class="myInput">
<button onclick="myFunction(event)">Copy text</button>
</div>
</body>
</html>
Another way you can achieve is by using this object. I have modified your code.
<!DOCTYPE html>
<html>
<body>
<div >
<input type="text" value="Hello World 1" id="myInput" >
<button onclick="myFunction(this.parentNode.children[0])">Copy text</button>
</div>
<div >
<input type="text" value="Hello World 2" id="myInput" >
<button onclick="myFunction(this.parentNode.children[0])">Copy text</button>
</div>
<div >
<input type="text" value="Hello World 3" id="myInput" >
<button onclick="myFunction(this.parentNode.children[0])">Copy text</button>
</div>
<script>
function myFunction(previousSibling) {
var copyText = previousSibling;
copyText.select();
copyText.setSelectionRange(0, 99999)
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
</body>
</html>
What is happening here?
We make use of this object, which refers to context of current element, which is button after we click it.
Then we find the parent of it (parent of button) using this
Then from parent we get the corresponding child (input field)
which is children[0]
This child is then passed to the function
Above steps repeat for any button click
I have been working on a website, but for some reason when I click enter it stays on the same page. But when I click the button I added on the page itself it works. What I'm trying to do is go from my login page, index.html, to my home page after the password is verified, home.html. Any Ideas?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/popup.css?Version=1.1">
</head>
<body>
<div id="box">
<form id="myform-search" method="post" autocomplete="off">
<h1>Enter Password</h1>
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<button class="unmask" type="button" onclick="toggle()"></button>
<button class="enter" type="button" onclick="done()">Enter</button>
</p>
</form>
</div>
<div id="wrong">
<p>Sorry, but the password you entered is incorrect!</p>
</div>
<!--Javascript to show password Box-->
<script>
//Verifies password
function done() {
document.getElementById("box").style.display = "none";
var password = document.getElementById("p").value;
if (password == "12345") {
location.replace("http://apr.great-site.net/Home/home.html");
} else {
document.getElementById("wrong").style.display = "block";
}
};
function toggle() {
var x = document.getElementById("p");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
</body>
</html>
```````````````````````````````````````````
// Verifies password
function done() {
document.getElementById("box").style.display = "none";
var password = document.getElementById("p").value;
if (password == "12345") {
// returning true will submit the form
return true;
} else {
document.getElementById("wrong").style.display = "block";
// returning false will prevent submiting the form
return false;
}
};
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/popup.css?Version=1.1">
</head>
<body>
<div id="box">
<form id="myform-search" method="post" action="validationUrlHere" autocomplete="off" onsubmit="return done();">
<h1>Enter Password</h1>
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<!-- Commented this button as it is not needed in the context of the solution -->
<!--<button class="unmask" type="button" onclick="toggle()">something</button>-->
<!-- HERE is the interesting part : -->
<!-- Clicking the "Enter" button has same effect as -->
<!-- hitting the default submit button or pressing the Enter button on your -->
<!-- keyboard. Your cursor focus must be inside one of the form's elements, -->
<!-- preferably in the password input field -->
<button class="enter" type="button" onclick="done()">Enter</button>
<input type="submit" value="Real Submit" />
</p>
</form>
</div>
<div id="wrong" style="display: none;">
<p>Sorry, but the password you entered is incorrect!</p>
</div>
</body>
</html>
Take a look at this snippet, take what you need from it. To be honest, it's not clear what you are seeking... hope it will help you understand some basics :-)
Try this :
<form onSubmit="done()">
<p>
<input type="password" value="" placeholder="Enter Password" id="p" class="password">
<button class="unmask" type="button" onclick="toggle()"></button>
<button type="submit" class="enter">Enter</button>
</p>
</form>
If you want the function done() to be called when you hit enter you should add an event listener for Enter on your form. (Have in mind that you opened 2 form tags)
document.getElementById('myform-search').addEventListener('keyup', function(e) {
if(e.key=='Enter') {
done()
}
}
Once I click on a button on the main page a modal opens up with a list of items for the user to select from. The content within my modal is not getting focus when the modal is opened instead when I press tab - I see it tabbing through the rest of the items on the homepage (background) before actually getting into the modal.
How can I get my modal content to get focus once open rather than having to tab through the main page before reaching the modal?
Here is my code for the modal:
<div role="dialog" aria-modal="true" class="modal">
<div class="modal-dialog override">
<div class="modal-content">
<div class="section">
<header class="section-header">
<button tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
</header>
<div class="section-body">
<ng-content select=".modal-body"></ng-content>
</div>
</div>
</div>
</div>
</div>
This is my method for opening the modal:
public open() {
this.modal.open();
this.myService.getUsers()
.subscribe((data: ClassRoster[]) => {
this.classData = data;
});
}
You can use the autofocus attribute
The autofocus attribute is a boolean attribute.
When present, it specifies that an element should automatically get focus when the page loads.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Without JavaScript
Give your button the autofocus attribute:
<div role="dialog" aria-modal="true" class="modal">
<div class="modal-dialog override">
<div class="modal-content">
<div class="section">
<header class="section-header">
<button autofocus tabindex="0" class="pull-right win-icon win-icon-Clear" (click)="close()" title="close-dialog"></button>
</header>
<div class="section-body">
<ng-content select=".modal-body"></ng-content>
</div>
</div>
</div>
</div>
</div>
The reason that you have to do it to the button and cannot apply it straight to the div because autofocus only works on input, textarea, select and button. It's not ideal, but it works.
With JavaScript
Make your modal opening function like this:
public open() {
this.modal.open();
document.querySelector('.modal').focus();
this.myService.getUsers()
.subscribe((data: ClassRoster[]) => {
this.classData = data;
});
}
I`m using Angualr for my web.
I have this part in html code:
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
</div>
I want to add method (in the Controller) that when the text change, it will add a new button down.
How can I do it? I can`t understand how ng-change works.
thanks
Simply use ng-if to check if newCreative.companionUrl exists in scope :
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="newCreative.companionUrl">
</div>
You can also use a function to validate button visibility :
index.html
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="scripts.js"></script>
</head>
<body ng-controller="SampleController as ctrl">
<div class="form-group">
<div class="text-form" style="float: left;">Companion URL</div>
<input type="text" placeholder="Companion URL" class="companion-url-box" ng-model="newCreative.companionUrl">
<input type="button" value="Click me" ng-if="ctrl.isButtonAvailable()">
</div>
</body>
</html>
script.js
angular.module('app', []);
angular.module('app').controller('SampleController', function ($scope) {
var ctrl = this;
ctrl.isButtonAvailable = function() {
if(!$scope.newCreative) {
return false;
}
// Ensure companion url starts with https:// using a regular expression
return /^https:\/\//.test($scope.newCreative.companionUrl);
}
});
Working example
Check out this Plunker : https://plnkr.co/edit/n8VtJrenePGf9hCbmzWJ
You can use the directives ng-change on input and ng-if or ng-show on button, plus a little code on controller.
Check this:
http://codepen.io/mQuixaba/pen/oZqXWG?editors=1111
HTML:
<div ng-app="myApp" ng-controller="MyController">
<label for="input">Text:</label>
<input type="text" id="input" ng-model="text" ng-change="showButton=true"/>
<button ng-if="showButton" ng-click="hideButton()">My Button</button>
</div>
JS:
angular
.module('myApp', [])
.controller('MyController', function($scope){
$scope.showButton = false;
$scope.text = "My text";
$scope.hideButton = function() {
$scope.showButton = false;
}
});
I have a div hidden initially, a text box which performs a live search in the database and returns an array of the matched results. I want to make the div visible only if a value from the array is selected and hide it otherwise. How can i do this?
<html>
<head>
<link rel="stylesheet" type="text/css" href="b.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script src="jquery.autocomplete.js"></script>
<script>
function showDiv() {
$("#panel").slideDown("slow");
}
</script>
</head>
<body>
<h2>ESAMP</h2>
<h3 class="sup">SUPPORT</h3>
<h3 class="fed">FEEDBACK</h3>
<div class="container">
<div class="tag"><p>SEARCH</p></div>
<input class="box" type="text" name="serch" id="serch" placeholder="Enter Your Software Name" onEnter="showDiv()"/>
<input class="mybutton" type = "submit" value="Search" onclick="showDiv()">
</form>
<img class =resize src="texture_graphite_blue.jpg" alt="" />
<div id="panel" style="display:none;" class="panel" >
HELLO
</div>
</div>
</body>
</html>
currently i am showing the div on a button click. I want to show the div when the input value is selected from an array.