Div to show box shadow when button is clicked - javascript

I am wanting to have this button be clicked and then it highlight the div orange.. So far, I am only able to get it to highlight the button when clicked... Unfortunately, the div highlights whether the button click is done or not.. NO jquery please.
var addShadow = function(e) {
e = e || window.event;
e.preventDefault();
var el = e.target || e.srcElement;
el.className = 'highlight';
setTimeout(function() {
removeShadow(el);
}, 300);
};
var removeShadow = function(el) {
el.className = 'normal';
};
.normal{
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width:400px;
}
.highlight{
box-shadow: inset 0 0 20px 0 orange;
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width:400px;
}
<button class="normal" onclick='addShadow(event);'>
Click here to highlight div.</button>
<div class="highlight">Want it to highlight orange here when button is clicked.</div>

You're adding the click handler to the button element, so when you click on it, the event target is going to be the button, which is why the button is getting highlighted instead of the div on click.
Instead of trying to grab the div from the event, you can just create a reference to it in your script by selecting it by its id. In the example below it's called divToHighlight.
var divToHighlight = document.getElementById('my-div');
var addShadow = function(e) {
e = e || window.event;
e.preventDefault();
divToHighlight.className = 'highlight';
setTimeout(function() {
removeShadow(divToHighlight);
}, 300);
};
var removeShadow = function(el) {
el.className = 'normal';
};
.normal {
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width: 400px;
}
.highlight {
box-shadow: inset 0 0 20px 0 orange;
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width: 400px;
}
<button class="normal" onclick='addShadow(event);'>
Click here to highlight div.</button>
<div class="normal" id="my-div">Want it to highlight orange here when button is clicked.</div>

You can use CSS and the :active state for this:
.normal{
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width:400px;
}
.normal:active + .normal{
box-shadow: inset 0 0 20px 0 orange;
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width:400px;
}
<button class="normal" >
Click here to highlight div.</button>
<div class="normal">Want it to highlight orange here when button is clicked.</div>

Give this code a try:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Ilan's Test</title>
<style>
.normal {
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width: 400px;
}
.highlight {
box-shadow: inset 0 0 20px 0 orange;
border: 1px solid grey;
padding: 5px 7px;
display: inline-block;
margin: 5px;
width: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12 normal" id="results">
My div
</div>
<button class="btn btn-primary" id="switchbtn">Click me</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script>
// clicking the button begins here
$('#switchbtn').click(function() {
// lets get the div we're targeting
var mydiv = $('#results');
// lets check if its highlighted or not
if (mydiv.hasClass('normal') == true) {
// if the div is in its normal state, lets highlight it
$(mydiv).removeClass('normal');
$(mydiv).addClass('highlight');
} else {
// if the div is highlighted, let's normalize it
$(mydiv).removeClass('highlight');
$(mydiv).addClass('normal');
}
});
</script>
</body>
</html>

Related

JavaScript chatbot - deleting the whole frame rather than just the message

I have the following webpage with chatbot inside. When you click a message it deletes it (pop up option) but this also happens (deletion option) when you try to click the outside of the frame and just inside the frame (not on a message) - which I want to prevent.
repl.it:
https://replit.com/#amalsheikh2309/WhisperedRelevantOutsourcing#index.html
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<style>
body {
background-color: #f2f2f2;
}
#chatroom {
width: 500px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
overflow: scroll;
font-family: Arial, sans-serif;
color: #333;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px #ccc;
}
#messages {
height: 350px;
overflow: scroll;
background-color: #fff;
padding: 10px;
border-radius: 3px;
}
#messages div {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 3px;
}
#message-input {
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
}
#send-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="chatroom">
<div id="messages"></div>
<form>
<input type="text" id="message-input" placeholder="Type your message here...">
<button type="submit" id="send-button">Send</button>
</form>
</div>
<script>
const messageInput = document.getElementById('message-input');
const messagesContainer = document.getElementById('messages');
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
messageInput.value = '';
const messageElement = document.createElement('div');
messageElement.innerText = message;
messagesContainer.appendChild(messageElement);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
});
document.getElementById("messages").addEventListener("click", function(e) {
if (e.target && e.target.nodeName == "DIV") {
var message = confirm("Are you sure you want to delete this message?");
if (message == true) {
e.target.remove();
}
}
});
</script>
</body>
</html>
I can see that the problem lies here
document.getElementById("messages").addEventListener("click", function(e) {
if (e.target && e.target.nodeName == "DIV") {
var message = confirm("Are you sure you want to delete this message?");
if (message == true) {
e.target.remove();
}
}
});
but I am not sure how to prevent it deleting the entire DIV and what to replace that part of the code with.
Thanks in advance.
ok so i figured it out
after you append messageElement text. add classlist of message
then in your if statement
if (e.target && e.target.classList.contains("message")) {
this should only activate click event when you click on a message
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<style>
body {
background-color: #f2f2f2;
}
#chatroom {
width: 500px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
overflow: scroll;
font-family: Arial, sans-serif;
color: #333;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px #ccc;
}
#messages {
height: 350px;
overflow: scroll;
background-color: #fff;
padding: 10px;
border-radius: 3px;
}
#messages div {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 3px;
}
#message-input {
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
}
#send-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="chatroom">
<div id="messages"></div>
<form>
<input type="text" id="message-input" placeholder="Type your message here...">
<button type="submit" id="send-button">Send</button>
</form>
</div>
<script>
const messageInput = document.getElementById('message-input');
const messagesContainer = document.getElementById('messages');
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
messageInput.value = '';
const messageElement = document.createElement('div');
messageElement.innerText = message;
messagesContainer.appendChild(messageElement);
messageElement.classList.add("message");
messagesContainer.scrollTop = messagesContainer.scrollHeight;
});
document.getElementById("messages").addEventListener("click", function(e) {
if (e.target && e.target.classList.contains("message")) {
var message = confirm("Are you sure you want to delete this message?");
if (message == true) {
e.target.remove();
}
}
});
</script>
</body>
</html>
You have added event listener to #messages div that's why it removes all children from the #messages div. Instead of #messages div you should add click event listener to single message.

Button changing newest div item instead of the correct

I created a div table of sorts, where there is a button, and that button creates a box, and what is supposed to happen is that you can click any of the {x} boxes and it colors it black However, instead of coloring that box black(or white), it colors the newest one black(or white). How do I change this?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rule 110</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<center><h1>Rule 110</h1></center>
<div class="grid-container">
<main id="content"></main>
</div>
<button onclick=add() class="button">+</button>
</body>
</html>
Javascript:
const first = document.getElementById("first")
const second = document.getElementById("second")
const third = document.getElementById("third")
const fourth = document.getElementById("fourth")
const fifth = document.getElementById("fifth")
const sixth = document.getElementById("sixth")
const seventh = document.getElementById("seventh")
const eigth = document.getElementById("eigth")
const ninth = document.getElementById("ninth")
var extra = 1;
var thingrowx=0;
var thingrowy = 1;
function changeColor(test) {
if (document.getElementById(test).className === "grid-item-white"){
document.getElementById(test).className="grid-item-black";}
else {
document.getElementById(test).className="grid-item-white";
}
}
function createTable() {
rn = window.prompt("Input number of rows", 1);
cn = window.prompt("Input number of columns",1);
for(var r=0;r<parseInt(rn,10);r++)
{
var x=document.getElementById('myTable').insertRow(r);
for(var c=0;c<parseInt(cn,10);c++)
{
var y= x.insertCell(c);
y.innerHTML="Row-"+r+" Column-"+c;
}
}
}
function repeat(func, times) {
func;
times && --times && repeat(func, times);
}
function test() {
document.querySelector('#content').insertAdjacentHTML(
'afterbegin',
`<div class="grid-item-white" id="combined" onclick=changeColor('combined')>
</div>`
)
}
function add() {
extra += 1;
thingrowx += 1;
var combined = "(" + thingrowx + "," + thingrowy + ")"
alert(combined)
repeat(test(), thingrowy)
}
CSS:
.button {
border: none;
background-color: black;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
color: white;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
.grid-container {
display: grid;
grid-template-columns: 50px 50px 50px 50px 0px 50px 50px 50px 0px 50px 50px 50px 50px 50px 50px 50px;
padding: 10px;
}
.grid-item-white {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.grid-item-black {
background-color: black;
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
color: white
}
body {background-color: #cdf1eb ;}
I think the problem is in the test function.
function test() {
document.querySelector('#content').insertAdjacentHTML(
'afterbegin',
`<div class="grid-item-white" id="combined" onclick=changeColor('combined')>
</div>`
)
}
You're setting the id to "combined" for every new added element. But an id must be unique for each element in the whole html document. May be you intended to do the following.
function test(combined) {
// use the combined index that is passed from the add function
document.querySelector('#content').insertAdjacentHTML(
'afterbegin',
// -------------------------------vvvvvvvvvvv-- use template literal
`<div class="grid-item-white" id="${combined}" onclick=changeColor('${combined}')>
</div>`
)
}
function add() {
extra += 1;
thingrowx += 1;
var combined = "(" + thingrowx + "," + thingrowy + ")"
alert(combined)
repeat(test(combined), thingrowy) // pass the combined index to the test method
}
Your code is very cluttered with poor naming and lots of unused variables and functions, so I've tried to refactor a little!
const contentElement = document.getElementById("content");
contentElement.addEventListener("click", (event) => {
// here event.target represents the element that has been clicked on
changeColor(event.target);
});
let rowX = 0;
let rowY = 1;
function changeColor(element) {
if (element.className === "grid-item-white")
element.className = "grid-item-black";
else element.className = "grid-item-white";
}
function add() {
rowX += 1;
const combined = "(" + rowX + "," + rowY + ")";
// alert(combined);
document
.querySelector("#content")
.insertAdjacentHTML(
"afterbegin",
`<div class="grid-item-white" data-id="${combined}"></div>`
);
}
.button {
border: none;
background-color: black;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
color: white;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4caf50;
}
.button1:hover {
background-color: #4caf50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008cba;
}
.button2:hover {
background-color: #008cba;
color: white;
}
.grid-container {
display: grid;
grid-template-columns: 50px 50px 50px 50px 0px 50px 50px 50px 0px 50px 50px 50px 50px 50px 50px 50px;
padding: 10px;
}
.grid-item-white {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.grid-item-black {
background-color: black;
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
color: white;
}
body {
background-color: #cdf1eb;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Rule 110</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<center>
<h1>Rule 110</h1>
</center>
<button onclick="add()" class="button">+</button>
<div class="grid-container">
<main id="content"></main>
</div>
<script src="script.js"></script>
</body>
</html>
Here I've used event delegation to listen on click event on any grid items. So if we listen for click events on the #content element and use the event.target then we get the grid item that has been clicked on. Then we can pass that element to the changeColor method.
If you don't understand anything feel free to ask me in the comment. Hope this helps.
I think it's because all of your divs has the same id ("combined"), so the browser get the top one in the DOM. This can be solved if you give each of them a unique id. This works for me:
`<div class="grid-item-white" id="combined${extra}" onclick=changeColor('combined${extra}')`

Multiple functions on two click on same element

I want to run two different functions on click of an element. If I click a button first time clickfunction1 should run and when I click the button second time clickfunction2 should run. My problem is when I click an element on alternate basis two different functions should run one by one, like on first click first function will run and on clicking second time the same element second function will run.
<!DOCTYPE html>
<html>
<head>
<title>Navigation Focus/Blur</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<style>
.imageclick {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
margin-top: 10px;
text-align: center;
background-color: #f0f0f0;
padding: 20px 0;
}
a {
float: left;
padding: 15px 33px 15px 33px;
font-size: 10px;
margin: 1px 1px 1px 3px;
}
a:hover {
text-decoration: none;
color: #fff;
}
a {
background-color: #23527c;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.clickbox {
margin: 20px 0;
position: absolute;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
background-color: #9ecbf3;
display: none;
}
.icon-bar {
display: block;
width: 25px;
height: 2px;
background-color: #fff;
margin: 6px 0;
}
button {
background-color: black;
border: none;
padding: 5px 12px;
border-radius: 5px;
}
</style>
<script type="text/javascript">
function clickFunction1() {
document.getElementById("navigate").style.display = "block";
}
function clickFunction2() {
document.getElementById("navigate").style.display = "none";
}
</script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Navigation Focus/Blur</h2>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4 imageclick">
<button onclick="clickFunction1()" onclick="clickFunction2()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="clickbox" id="navigate">
Home
About
Serve
Webst
Graph
SeoD
CPhp
Wpres
PlC++
Pjava
Angjs
JavaS
PPyth
Photo
ILLust
CoraL
PHtml
Lcss3
Lbstrp
Jquery
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</section>
</body>
</html>
In this solution I create a new function clickFunction() with no number, to manage your two existing functions and I also declare a boolean flag which I toggle...
var Toggle=false;
function clickFunction(Toggle2){
if(Toggle2){clickFunction1();} else {clickFunction2();}
Toggle=!Toggle;
}
The basic HTML...
<button onclick="clickFunction(Toggle);"></button>
For what you want to achieve, there is no need of 2 functions. You can just read the current display and toggle the value.
function clickFunction() {
const element = document.getElementById("navigate");
const display = element.style.display || 'block' /* default style if inline display doesnt exist on load */;
element.style.display = display === 'block' ? 'none' : 'block';
}
You can programmatically register click event on element you want, and then unregister it to control what function will be call when user clicking it.
For your specific case, you should first register the clickFunction1 first, and inside it, you unregister itself and then register the clickFunction2
<script type="text/javascript">
var btn = document.querySelector('button') // Replace `button` with your selector
btn.addEventListener('click', clickFunction1)
function clickFunction1() {
document.getElementById('navigate').style.display = 'block'
// make clicking the button call other function
btn.removeEventListener('click', clickFunction1)
btn.addEventListener('click', clickFunction2)
}
function clickFunction2() {
document.getElementById('navigate').style.display = 'none'
}
</script>
You can have a function with a counter. When the click is odd(first click) the first function will be called else the second will be called
var count=0;
function decide()
{
count++;
if(count%2==1)
clickFunction1();
else
clickFunction2();
}
function clickFunction1() {
document.getElementById("navigate").style.display = "block";
}
function clickFunction2() {
document.getElementById("navigate").style.display = "none";
}
.imageclick {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-top: 10px;
text-align: center;
background-color: #f0f0f0;
padding: 20px 0;
}
a {
float: left;
padding: 15px 33px 15px 33px;
font-size: 10px;
margin: 1px 1px 1px 3px;
}
a:hover {
text-decoration: none;
color: #fff;
}
a {
background-color: #23527c;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
.clickbox {
margin: 20px 0;
position: absolute;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #9ecbf3;
display: none;
}
.icon-bar {
display: block;
width: 25px;
height: 2px;
background-color: #fff;
margin: 6px 0;
}
button {
background-color: black;
border: none;
padding: 5px 12px;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Navigation Focus/Blur</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">Navigation Focus/Blur</h2>
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4 imageclick">
<button onclick="decide()">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="clickbox" id="navigate">
Home
About
Serve
Webst
Graph
SeoD
CPhp
Wpres
PlC++
Pjava
Angjs
JavaS
PPyth
Photo
ILLust
CoraL
PHtml
Lcss3
Lbstrp
Jquery
</div>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</section>
</body>
</html>

Why the following button does not work?

This question is completely different due to the fact that this Time I am integrating the code from a jsfiddle with the answer of another question but I am asking about an error that I am getting in the process,
I am writing an small script to produce some tables, the main idea is to copy text into my first text area called:
<textarea cols="70" rows="15" id="text" ></textarea>
to the press the button called: Generate tables:
<button id="generate">Generate tables</button><br>
That calles the function called: generate
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
to produce the tables in the second text area called: out1
<div cols="3" rows="15" id="out1" ></div>
I don't know why when I copy text to the fist area an press the button nothing happens, I would like to appreciate any suggestion to fix the code, thanks in advance, I really appreciate the support,
<!DOCTYPE html>
<html>
<head>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</head>
<style>
table{background:#CCC;border:1px solid #000;}
table td{padding:15px;border:1px solid #DDD;}
textarea {
color:GreenYellow ;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {background-color:#000C17;}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float:center;
width:700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
<body>
<textarea cols="70" rows="15" id="text" ></textarea>
<div cols="3" rows="15" id="out1" ></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
</body>
</html>
Your javascript is fine.. The problem is your code is executed before the DOM loaded properly. Since your DOM is not loaded when the script executed, so your JS thrown error.
Look at my snippet, I've correcting your script.
<!DOCTYPE html>
<html>
<head>
<style>
table {
background: #CCC;
border: 1px solid #000;
}
table td {
padding: 15px;
border: 1px solid #DDD;
}
textarea {
color: GreenYellow;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {
background-color: #000C17;
}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float: center;
width: 700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<textarea cols="70" rows="15" id="text"></textarea>
<div cols="3" rows="15" id="out1"></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function () {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g
, '"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</body>
</html>

HTML5 Text Box position on canvas

I am trying to change Text Box position when the button is clicked. I get the following error message : "Cannot set property 'top' of undefined"
when I remove the following line: " var user = document.getElementById("user").value;"
it works fine
any suggestions
#canvas{
position: absolute;
background-color: red;
margin-left: 50px;
margin-top: 10px;
}
#user{
top:160px;
right:1000px;
position: absolute;
border-radius: 10px ;
width: 180px;
border: 3px solid #BADA55;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
background: rgba(255,255,255,0.0);
color: blue;
font-size: 40px;
font-weight: bold;
margin: 0 0 10px 0;
display: inline;
visibility: visible;
}
#btn{
position: absolute;
bottom :200px;
right:1100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="main.css">
<script>
function changePosition(){
var user = document.getElementById("user").value;
user.style.top= "100px";
user.style.rigth = "100px";
console.log(user);
}
</script>
</head>
<body>
<div id="wra">
<canvas id="canvas" width="350" height="350"></canvas>
<input type="text" id="user" value=""><br>
</div>
<button onclick ="changePosition()" id="btn" type="button">Submit</button></p>
</body>
</html>
Change
function changePosition(){
var user = document.getElementById("user").value;
user.style.top= "100px";
user.style.rigth = "100px";
console.log(user);
}
To
function changePosition(){
var user = document.getElementById("user");
user.style.top= "100px";
user.style.right = "100px";
console.log(user.value);
}

Categories