I would like to make a script that will create a new div with header and a paragraph which will be taken from the form. Here is my code:
<!DOCTYPE html>
<html lang="en">
<style>
.h{
width: 500px;
}
.p{
width: 500px;
height: 250px;
text-overflow: ellipsis;
}
</style>
<body>
H:<br>
<input type="text" class="h"><br><br>
P:<br>
<textarea class="p"></textarea><br><br>
<button onclick="add();">Send</button>
</body>
<script>
function add(){
var a = document.getElementsByClassName("h");
var b = document.getElementsByClassName("p")
var div = document.createElement("DIV");
var naglowek = document.createTextNode(a);
var tresc = document.createTextNode(b);
div.appendChild(naglowek);
document.body.appendChild(div);
}
</script>
</html>
You're passing an array-type object to the function createTextNode, what you need to do is assign the value of those fields.
I recommend you to use ids.
<!DOCTYPE html>
<html lang="en">
<style>
.h{
width: 300px;
}
.p{
width: 300px;
height: 150px;
text-overflow: ellipsis;
}
</style>
<body>
H:<br>
<input type="text" id="h" class="h"><br><br>
P:<br>
<textarea id="p" class="p"></textarea><br><br>
<button onclick="add();">Send</button>
</body>
<script>
function add(){
var a = document.getElementById("h").value;
var b = document.getElementById("p").value;
var div = document.createElement("DIV");
var naglowek = document.createTextNode(a);
var tresc = document.createTextNode(b);
div.appendChild(naglowek);
div.appendChild(document.createElement('p'));
div.appendChild(tresc);
document.body.appendChild(div);
}
</script>
</html>
Related
i want my "detail" button to show the text hidden through overflow but i don't know how to access it. I tried to access it through previousSibling and nextSibling of my button but it doesn't work. I also did it with querySelectorAll but it changes all of my appended "p" instead of just the one linked to the button i click on
let add = document.getElementById("addNote");
let resultat = document.getElementById("result");
let y=1;
var addANote = function () {
let contenu = document.getElementById("saisie").value;
let resultat = document.getElementById("resultat");
var newP = document.createElement("p");
var newText1 = document.createTextNode(`Note ${y} \n ${contenu}`);
newP.setAttribute("overflow", "hidden");
var bouton = document.createElement('button');
bouton.innerHTML ="Details";
newP.appendChild(newText1);
document.getElementById("result").appendChild(newP);
document.getElementById("result").appendChild(bouton);
bouton.addEventListener("click", function() {
bouton.previousSibling.setAttribute("overflow", "visible");
});
}
add.addEventListener("click", function() {
addANote();
y++;
})
add.onclick = function(event){
event.preventDefault()
};
#saisie {
height : 250px;
width: 75%;
}
p {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="popup.css">
<title>PopUp</title>
<script src='popup.js' defer></script>
</head>
<body>
<div id="content">
<form>
<h1> Note Taker</h1>
<h2>Add a new note:</h2>
<p>Note: </p>
<textarea type="text" id="saisie" name="saisie" required minlength ="1" maxlength ="3000" size ="500"></textarea>
</br>
</br>
<button type="submit" id="addNote"> Ajouter une Note </button>
</form>
<br>
<br>
<div class="autoShowHide" id="result"></div>
</div>
</body>
</html>
Overflow isn't an attribute, it's a style.
You can revert on a second click by checking the current style of the element in an if statement.
let add = document.getElementById("addNote");
let resultat = document.getElementById("result");
let y = 1;
var addANote = function() {
let contenu = document.getElementById("saisie").value;
let resultat = document.getElementById("resultat");
var newP = document.createElement("p");
var newText1 = document.createTextNode(`Note ${y} \n ${contenu}`);
newP.style.overflow = "hidden";
var bouton = document.createElement('button');
bouton.innerHTML = "Plus Details";
newP.appendChild(newText1);
document.getElementById("result").appendChild(newP);
document.getElementById("result").appendChild(bouton);
bouton.addEventListener("click", function() {
let style = bouton.previousSibling.style;
if (style.overflow == "visible") {
style.overflow = "hidden";
bouton.innerHTML = "Plus Details";
} else {
style.overflow = "visible";
bouton.innerHTML = "Moin Details";
}
});
}
add.addEventListener("click", function(e) {
e.preventDefault();
addANote();
y++;
})
#saisie {
height: 250px;
width: 75%;
}
p {
white-space: nowrap;
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="popup.css">
<title>PopUp</title>
<script src='popup.js' defer></script>
</head>
<body>
<div id="content">
<form>
<h1> Note Taker</h1>
<h2>Add a new note:</h2>
<p>Note: </p>
<textarea type="text" id="saisie" name="saisie" required minlength="1" maxlength="3000" size="500"></textarea>
</br>
</br>
<button type="submit" id="addNote"> Ajouter une Note </button>
</form>
<br>
<br>
<div class="autoShowHide" id="result"></div>
</div>
</body>
</html>
I'm trying to change the background of my canvas element for a school project based on user input from the color-picker. However I can't seem to get it to work. I've checked over the code and everything seems to be properly selected. Any ideas on why?
docolor() {
var myCanvas = document.querySelector("#myCanvas");
var colorinput = document.querySelector("#clr");
var color = colorinput.value;
myCanvas.style.backgroundColor = color;
}
<head>
<title> canvas practice </title>
</head>
<body>
<canvas id = "myCanvas">
</canvas>
<br>
<input type = "color" value = "#001A57" id = "clr" onchange = "docolor()">
</body>
</html>
-
#clr {
display: inline-block;
}
#myCanvas {
height: 150px;
width: 300px;
border: 2px solid;
}
docolor isn't properly defined, so it never runs. Declare your function like this and it should work:
function docolor() {
var myCanvas = document.querySelector("#myCanvas");
var colorinput = document.querySelector("#clr");
var color = colorinput.value;
myCanvas.style.backgroundColor = color;
}
Let me know if it's still not working. Here's a link to a working codepen if you want to see everything working together. Goodluck with your project!
It looks you forgot the function declaretion.
<html>
<head>
<title> canvas practice </title>
<style>
#clr {
display: inline-block;
}
#myCanvas {
height: 150px;
width: 300px;
border: 2px solid;
}
</style>
</head>
<body>
<canvas id="myCanvas">
</canvas>
<br>
<input type="color" value="#001A57" id="clr" onchange="docolor()">
</body>
<script>
function docolor() {
var myCanvas = document.querySelector("#myCanvas");
var colorinput = document.querySelector("#clr");
var color = colorinput.value;
myCanvas.style.backgroundColor = color;
}
</script>
</html>
Overview of the code: This code consists of an editable div section. Below the div, there is a button which creates a span element, inserts the text "tag" in the span element and finally appends the span element in that editable div
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
#sample-div
{
border-style: solid;
border-width: 1px;
border-color: black;
height:100px;
overflow: auto;
}
</style>
<script type="text/javascript">
function addTags()
{
var tag = document.createElement("span");
tag.className = "$(tag)"
tag.innerHTML = "tag";
tag.contentEditable = false;
$('#sample-div').append(tag);
}
$(document).ready(function(){
$('span').keyup(function(){
if(!this.value)
{
alert('this is empty');
}
});
});
</script>
</head>
<body>
<div id="sample-div" contenteditable="true"></div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
</body>
</html>
General observation: When I type something inside the div and then click on the button, the HTML DOM will change as:
<div id="sample-div" contenteditable="true">
this is a <span class="$(tag)" contenteditable="false">tag</span>
</div>
Please note that the text "this is a", is provided by me when I type inside the div element. "tag" appears when I click on the input button
Expectation / Trying to achieve: When I delete the text in the span, the DOM will change as:
<div id="sample-div" contenteditable="true">
this is a
</div>
So, my aim is to get the information that the element span is removed when I delete the text in span. I am trying to achieve that by doing the following, which is not correct:
$(document).ready(function(){
$('span').keyup(function(){
if(!this.value)
{
alert('this is empty');
}
});
});
So, my question is how do I get the message "this is empty" when the DOM removes the span element?
You could use a variable as a "tag" counter.
When the amount tags present in the div gets lower than the tag counter, that is when one got deleted.
var tagCount = 0;
function addTags(){
var tag = document.createElement("span");
tag.className = "$(tag)"
tag.innerHTML = "tag";
tag.contentEditable = false;
$('#sample-div').append(tag);
// Increment tagCount
tagCount++;
}
$(document).ready(function(){
$('#sample-div').keyup(function(){
if($(this).find("span").length < tagCount){
alert('One tag was removed');
// Decrement tagCount
tagCount--;
}
});
}); // Ready
#sample-div{
border-style: solid;
border-width: 1px;
border-color: black;
height:100px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample-div" contenteditable="true"></div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
You probably should use MutationObserver
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#sample-div
{
border-style: solid;
border-width: 1px;
border-color: black;
height:100px;
overflow: auto;
}
</style>
</head>
<body>
<div id="sample-div" contenteditable="true"></div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
<script type="text/javascript">
'use strict';
function addTags()
{
var tag = document.createElement("span");
tag.className = "$(tag)"
tag.innerHTML = "tag";
tag.contentEditable = false;
document.getElementById('sample-div').appendChild(tag);
}
function onTagRemoved(node)
{
alert(`node ${node.tagName}.${node.className} removed`);
}
//
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
//
// select the target node
let target = document.querySelector('#sample-div');
// create an observer instance
let observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// console.log(mutation);
let node = null;
for (var i = 0; i < mutation.removedNodes.length; i++) {
node = mutation.removedNodes[i];
if (/span/i.test(node.tagName)) {
onTagRemoved(node);
}
}
});
});
// configuration of the observer:
let config = { attributes: false, childList: true, characterData: false }
// pass in the target node, as well as the observer options
observer.observe(target, config);
// later, you can stop obser
// observer.disconnect();
</script>
</body>
</html>
Tested on Firefox 52
Hey guys i was wondering if someone could help with some issues on my code.
Basically ive created 4 elements(divs) in an onclick event.From html i've also done so that same button dissapears
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class= "boton" id="start">Play</button>
<button class= "boton" id="hit">Hit</button>
<button class= "boton" id= "stand">Stand</button>
<script type="text/javascript">
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo= document.getElementsByTagName('body')[0]
var crear_cartas= function() {
var card= document.createElement('div');
var texto =document.createTextNode("CASINO");
card.setAttribute("class","cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick= function(){
crear_cartas()
crear_cartas()
crear_cartas()
crear_cartas()
jugar.setAttribute('class','ocultar')
}
</script>
</body>
</html>
Up to there is ok , but im not sure if from jquery i can apply a filter that activates on the same onclick event that appears in javascript code (on those 4 created elements )to the even ones so that they make an animation lowering slightly the margin.
I've read about it but i am a bit at sea given that the filter would apply to created elements..
Thank you in advance guys
css class ".cartas" code included:
.cartas{
/*display: none;*/
margin: 260px 75px 0 75px;
display: inline-block;
border-radius: 10px;
border: 1px solid black;
padding-top: 50px;
height:100px;
width:100px;
color: #003366;
font-family: Muli,Helvetica Neue,Helvetica,sans-serif;
text-align: center;
background-color: #f0f8ff;
}
Add an onlcick event to all event divs. This event will add a class that will push the elements below those divs downward using a margin-bottom
Snippet below
var counter = 0;
var jugar = document.getElementById('start')
var mas = document.getElementById('hit')
var mantener = document.getElementById('stand')
var cuerpo = document.getElementsByTagName('body')[0]
var crear_cartas = function() {
card = document.createElement('div');
var texto = document.createTextNode("CASINO");
card.setAttribute("class", "cartas");
card.appendChild(texto);
cuerpo.appendChild(card);
}
jugar.onclick = function() {
for (var x = 0; x < 4; ++x) {
crear_cartas();
if ((x + 1) % 2 == 0) {
card.addEventListener('click', function() {
this.classList.add("move");
})
}
}
jugar.setAttribute('class', 'ocultar')
} //end func
div {
transition: margin-bottom 0.5s;
}
.move {
margin-bottom: 50px;
}
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="blackjack2.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="blackjack1.js"></script>
</head>
<body>
<button class="boton" id="start">Play</button>
<button class="boton" id="hit">Hit</button>
<button class="boton" id="stand">Stand</button>
</body>
</html>
Right now I have a base html page that gets the most popular videos using youtubes api. So far it displays the title of the videos but i'm trying to make those titles clickable. If the title was clicked they would then just be brought to the video on actual youtube. I know that I could theoretically just find the most popular videos then do a clickable link but I want this to more or less auto update everytime a new popular video gets found with the youtube api. Right now I have this basic code.
<html>
<head>
<title>My Videos</title>
<style>
.titlec {
font-size: small;
}
ul.videos li {
float: left;
width: 10em;
margin-bottom: 1em;
}
ul.videos {
margin-bottom: 1em;
padding-left : 0em;
margin-left: 0em;
list-style: none;
}
</style>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function showData(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 20);
// var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
html.push('<span class="titlec">', title, '...</span><br /></span></li>');
}
// html.push('</ul><br style="clear: left;"/>');
document.getElementById('videos2').innerHTML = html.join('');
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url, false);
}
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
<object id="player">
</object>
</div>
<div id="videos2"></div>
<script
type="text/javascript"
src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">
</script>
</body>
</html>
I am not sure if I exactly understand what you are trying to achieve but I have created a jsfiddle!
Here is the code:
<html>
<head>
<title>My Videos</title>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function showData(data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t.substr(0, 20);
html.push('<li class="titlec">' + title + '</li>');
}
document.getElementById('videos2').innerHTML = html.join('') + '</ul>';
if (entries.length > 0) {
loadVideo(entries[0].media$group.media$content[0].url);
}
}
function loadVideo(e) {
var container = document.getElementById('playerContainer');
var player = document.getElementById('player');
container.removeChild(player);//remove object child
player.setAttribute('data',e);//change link
container.appendChild(player);//add object back
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
<object id="player"></object>
</div>
<div id="videos2"></div>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=this_week&alt=json-in-script&callback=showData&max-results=10&format=5">
</script>
</body>