Sorry I have read the previous threads regarding this topic but it is still not working in my case!
Some context is this is a for a simple javascript game. When the user mouses over an inventory item I want it to reveal a short description of the item.
23/06/2021 EDIT - okay heres a cut down version
Relevant code:
**HTML**
<!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">
<script defer src="scaled.js"></script>
<link rel="stylesheet" href="scaled.css">
<title>Scaled</title>
</head>
<body>
<div id= "inventory" class = "inventory" ></div>
<div id= "itemtext" class = "itemtext" >A test item!</div>
<button id = "button" onclick = "addImage()">test</button>
</body>
</html>
**CSS**
.itemtext{
position: absolute;
visibility: hidden;
font-size: 80px;
top:50px;
color: red;
z-index: 200;
}
.itemtext-on{
position: absolute;
visibility: initial;
color: green;
font-size: 80px;
top:50px;
z-index: 200;
}
#button {
height: 40px;
width: 40px;
color: blue;
}
**Javascript**
const itemText = document.getElementById('itemtext');
const inventory = document.getElementById('inventory');
function reveal() {
itemText.classList.toggle('itemtext-on');
}
document.getElementById("Div1").onmouseover = function() {reveal()};
function addImage(){
var a = document.createElement("div");
a.id = "Div1";
var iconUrl = document.createElement("img");
iconUrl.src = "bla.jpg";
a.appendChild(itemText);
a.appendChild(iconUrl);
inventory.appendChild(a);
}
Error message is:
"Uncaught TypeError: Cannot set property 'onmouseover' of null
at scaled.js:10"
So it does not like the fact I am trying to document.getElementById for a div which does not yet exist.
Appreciate any / all help :)
Related
So the code worked for the guy on the tutorial.
I then checked my code from his git repos but couldn't find any mistakes.
It's a very simple website where it just saves the values which you input in the field as a list item. It showed an error.
let myLeads = []
const inputEl = document.getElementById("input-el")
const inputBtn = document.getElementById("input-btn")
const ulEl = document.getElementById("ul-el")
inputBtn.addEventListener("click", function(){
myLeads.push(inputEl.value)
console.log(myLeads)
})
for (let i = 0; i < myLeads.length; i++) {
ulEl.innerHTML += "<li>" + myLeads[i] + "</li>"
}
body{
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
}
input{
height: 50px;
width: 100%;
border: 1px solid green;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
button{
background-color: green;
color: antiquewhite;
height: 50px;
width: 150px;
border: 0ch;
border-radius: 10px;
}
<!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>Document</title>
<link rel="stylesheet" href="ChromeEx.css">
</head>
<body>
<input type="text" id="input-el">
<button class="input-btn">SAVE INPUT</button>
<ul id="ul-el"></ul>
<script src="ChromeEx.js" defer></script>
</body>
</html>
Since you are using const inputBtn = document.getElementById("input-btn") to get the button, but it does not have an id, you need to add an id for the button
So change
<button class="input-btn">SAVE INPUT</button>
to
<button id="input-btn" class="input-btn">SAVE INPUT</button>
To help you resolve issues like this in the future, you need to know how to interpret the error shown in the developer console. What it's saying is that you're trying to interact with or access something that doesn't exist (null). This means the variable you're using (inputBtn) holds the value null.
It's pretty clear then that what you thought you were assigning to this variable didn't work out the way you expected. The assignment code looks good, so we can be sure that the getElementById() method is not "returning" the intended value. Indeed, that method will return null when the id given to it is not found in the html.
The problem is when I click the Option (button) that appears on every div after I fetch the data using the While loop it only appears the top div but not the current div that I am viewing. This is the picture when I click the Option it only appears the one place:
<?php
$connect = mysqli_connect('localhost','root','','users_data_allocation');
$feeder = "SELECT * FROM `trade_feed_post`";
$runfeed = mysqli_query($connect,$feeder);
while ($showfeed = mysqli_fetch_assoc($runfeed)) {
# code...
$feedAcc = $showfeed['OwnerACC'];
$feedDate = $showfeed['Date and time'];
$feedQuote = $showfeed['quote'];
$feedBuys = $showfeed['No.of buys'];
echo "
<div class=\"border\">
<p>".$feedAcc."</p>
<button onclick=\"showOpt()\">Option</button>
<div class=\"menu\">
This is menu.
</div>
</div>
";
}
?>
<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>ShowData</title>
<style>
.border{
background-color: black;
color: white;
border: 2px solid red;
height: 220px;
width: 400px;
font-family: ebrima;
font-size: 25px;
padding-left: 10px;
}
.menu{
display: none;
}
</style>
<script>
function showOpt() {
document.querySelector('.menu').style.display = 'block';
}
</script>
</head>
<body>
</body>
</html>
I would add this element parameter to <button onclick=\"showOpt(this)\">Option</button>.
Then change function so that will find correct .menu for button (using common parent .border)
function showOpt(elem) {
elem.closest(".border").querySelector(".menu").style.display = 'block';
}
I'm try to rotate an element but when choosing another element it's all rotate at the same time.
So I need to know how to rotate an element and it would be nice if you guys have a similar system. Because I want to learn more about this kind of system. Which is very necessary and important to me to study and work.
$(document).ready(function() {
var container = document.querySelector(".container");
var rotate = document.createElement("div");
rotate.className = "rotate";
//create Element
$("#add").click(function() {
container.appendChild(addElement());
addEvent();
});
const addElement = () => {
var element = document.createElement("div");
element.className = "resizable";
return element;
}
//add event
function addEvent() {
$(".resizable").click(function(e) {
if (e.currentTarget === this) {
$(this).append(rotate);
$(this).resizable({
handles: 'ne, se, sw, nw'
});
$(this).draggable().rotatable({
handle: $('.rotate')
});
}
});
}
});
.resizable {
width: 100px;
height: 100px;
border: 1px solid #000;
position: relative;
user-select: none;
z-index: 0;
}
.rotate {
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
top: -30px;
left: calc(50% - 5px);
cursor: move;
}
<!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>jquery</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<button class="add" id="add">add</button> //for add element
<button class="save" id="save">save</button> //for save size and position
<div class="container"></div>
</body>
</html>
Thanks everyone in advance for helping me.
I Made a button using html, css and js which occurs randomly on the page.But i want the button inside the body tag and it keeps getting out.
HTML CODE:
<!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">
<script src="main.js" defer></script>
<link rel="stylesheet" href="style.css">
<title>SReflex</title>
</head>
<body>
<button class="random">1 </button>
</body>
</html>
CSS CODE:
*{
margin:0%;
padding:0%;
}
body{
height: 100vh;
width: 100vw;
position: fixed;
}
button.random {
/* looks of the button */
height: 3rem;
width: 3rem;
border: black;
border-style: solid;
border-radius: 50%;
display:block;
position:absolute;
}
JS CODE:
let temp= document.querySelector(".random");
temp.addEventListener("click",change);
function change(){
let posx = Math.floor(Math.random()*1000);
let posy = Math.floor(Math.random()*1000);
let posz = Math.floor(Math.random()*1000);
temp.style.left= posx + "vw";
temp.style.top= posy+ "vh";
temp.style.right= posz+ "vw";
}
How do i make the button to not go off screen, i want the page to not include the scroll bar.
Here is an easy way to do so, it works for the body or for a containing div because it's related to parent size.
check out the snippet.
let temp= document.querySelector(".random");
temp.addEventListener("click",change);
let maxw = temp.parentElement.clientWidth - 50;
let maxh = temp.parentElement.clientHeight - 50;
function change(){
let posx = Math.floor(Math.random() * (maxw));
let posy = Math.floor(Math.random() * (maxh))
temp.style.left= posx + "px";
temp.style.top= posy+ "px";
}
*{
margin:0%;
padding:0%;
}
body{
height: 100vh;
width: 100vw;
position: fixed;
}
button.random {
/* looks of the button */
height: 3rem;
width: 3rem;
border: black;
border-style: solid;
border-radius: 50%;
display:block;
position:absolute;
}
<!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">
<script src="main.js" defer></script>
<link rel="stylesheet" href="style.css">
<title>SReflex</title>
</head>
<body>
<button class="random">1 </button>
</body>
</html>
the -50 is to make sure it doesn't cross the edges, you can edit that to suit your needs.
i have created a div called parent and in that I have done simple css.
i want that when I clicked on parent then inside the parent div it should show that who many time I have clicked on the parent (div)
kindly help in this matter
<!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>Document</title>
</head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
.parent {
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="parent">
<h1>hello</h1>
</div>
</body>
<script>
var parent = document.querySelector(".parent").addEventListener("click", function() {
var x = 0;
x += 1;
parent.innerHTML = x;
});
</script>
</html>
You are getting an error that says parent is not defined.
First define parent, then use its variable to create your click event. Also you need to move the defining variable for your increment x outside of the click events function so you are not resetting it with each click...
If you wish to append the incremented number to the textContent, then also define your textContent outside the function, then you can use a literal to join them for your innerHTML.
const parent = document.querySelector(".parent")
let x = 0;
let content = parent.textContent
parent.addEventListener("click", () => {
x++;
parent.innerHTML = `<h1>${content}${x}</h1>`;
});
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
.parent {
position: relative;
width: 110px;
height: 110px;
background-color: red;
}
<div class="parent">
<h1>hello</h1>
</div>
There is some issues in your code:
As you are declaring the variable inside the event handler function the value is not updating, you should declare that in the global scope.
You can refer the current element using this key word as parent is not referring to the element you are thinking, it is having the value undefined.
On each click you can remove the last character from the string and add the counter value. I will also suggest you to use innerText or textContent instead of innerHTML if the content is plain text (not htmlString).
You can try the following way:
<!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>Document</title>
</head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
.parent {
position: relative;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="parent">
<h1>hello</h1>
</div>
</body>
<script>
var x = 0;
var element = document.querySelector(".parent");
var pText = element.textContent;
element.addEventListener("click", function() {
x += 1;
this.textContent = pText + x;
});
</script>
</html>