Click Div make another Div Appear - javascript

I am trying to make a prompt box of sorts in which you click one div and another transitions from visibility = hidden to visibility = visible. This is my code so far and I don't know why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="C.K.">
<title></title>
<link rel="stylesheet" href="./css/main.css">
<script type="text/js">
document.getElementById("addpanel").onclick = document.getElementById("selector").style.visibility = "visble";
</script>
</head>
<body>
<div id="selector">
SELECTOR
</div>
<div id="addpanel">
<table id="add">
<tr>
<td id="plus">+</td>
</tr>
<tr>
<td>Add New Item</td>
</tr>
</table>
</div>
</body>
</html>

Check this out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="C.K.">
<title></title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="selector">
SELECTOR
</div>
<div id="addpanel">
<table id="add">
<tr>
<td id="plus">+</td>
</tr>
<tr>
<td>Add New Item</td>
</tr>
</table>
</div>
<script type="text/javascript">
document.getElementById("selector").style.visibility = "hidden";
document.getElementById("addpanel").onclick = function(){document.getElementById("selector").style.visibility = "visible";};
</script>
</body>

HTML is parsed top to bottom. Your script will be run immediately just in case it produces any more HTML for the parser to handle (e.g. with document.write). At the point of document.getElementById("addpanel").onclick, addpanel does not exist because the HTML parser hasn't reached it yet.
Move your <script> block to after your apppanel element's closing tag.
Also, onclick needs to be a function. So it would be:
document.getElementById("addpanel").onclick = function() {
document.getElementById("selector").style.visibility = "visible"
}
Quick working example: https://jsfiddle.net/m2q6ubuv/

Try this
function show(){
document.getElmenetById('selector').style.visibility = 'visible'; }
Then just put onclick='show()' as an attribute in the tag you want to be the button.
Plus, you should put JavaScript at the end of the page, just first of the </body> tag.

Related

Equations are not being formatted when I append new equation MathJax

I am facing a problem using mathjax. the equations already available are formatted but the equations that I put by myself are not being formatted.
here is my code:
<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>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<input type="text" id="eq">
<button onclick="amb()">equation</button>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').append("`" + eq + "`");
}
</script>
</body>
</html>
First, I suggest use a form and a type=submit button for a better UX.
I found the solution you need to queue an action to rescan the page: MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
<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>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<form onsubmit="amb(); return false">
<input type="text" id="eq">
<input type="submit" value="equation">
</form>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').innerText = ("`" + eq + "`");
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
</script>
</body>
</html>

Importing table HTML from pandas on html body

I have pandas df, exported to html the result is..
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th>Flop</th>
<th>BET 1610 Freq</th>
<th>BET 1218 Freq</th>
<th>BET 575 Freq</th>
<th>CHECK Freq</th>
</tr>
</thead>
<tbody>
<tr>
<td>2s 2d 2c</td>
<td>2.90</td>
<td>11.91</td>
<td>36.90</td>
<td>48.30</td>
</tr>
...5k lines...
And i'm trying to import on html normal file and create a filter latter
Any ways to make it please?
Is possible with JS?
<!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="style.css" />
</head>
<body>
<button class="go">Search</button>
<link rel="import" href="3BP-OOP-PFR.html" />
</body>
</html>
Include
in php import "file.php";.
save both file with .php extension.
<!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="style.css" />
</head>
<body>
<button class="go">Search</button>
<?php
import "3BP-OOP-PER.php"; // import "3BP-OOP-PER.html";
?>
<link rel="import" href="3BP-OOP-PFR.html" />
</body>
</html>
I think this code help you!

How to inject working alert code from a HTML text form?

I am fairly new coding in JavaScript and web development, and I was wondering if there was any way to input an alert through an HTML text form and have it run on another page after it has been submitted, right now this is what I have.
index.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>form</title>
</head>
<body>
<form action="results.html" method="GET">
<div>
<label>Name</label> <input style="width: 400px;" size=400px type="text" name="name" id="name" placeholder="username" required>
</div>
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</form>
</body>
results.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Results</title>
</head>
<body>
<div id="results"></div>
Back to Form
<script>
const resultsList = document.getElementById('results')
new URLSearchParams(window.location.search).forEach((value,
name) => {
resultsList.append(`${name}: ${value}`)
resultsList.append(document.createElement('br'))
})
</script>
</body>
I want to get something like this
My input
What I am trying to achieve
You have to receive a variable that you send with the "get" method.
With the window.location object. This code gives you GET without the question mark.
let myTextAlert = window.location.search.substr(1)
(You can use split() method to get rid of &)
Next in Your div or insert js:
<div id="results">
<script>
alert("This page Says:" + myTextAlert);
</script>
</div>

How to make the h1 change to the what is written in an input?

I have an assignment where I have to change h1 to whatever is written in the input. I have to do this through making a function with getElementByID.
This is what I have so far
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent=
}
</script>
</body>
</html>
You passed the value (newtext) to your function but never used it:
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent=newtext;
}
</script>
</body>
</html>
Try changing your script to this:
function changeh1(newtext) {
document.getElementById("Header").innerText = newtext;
}
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent = newtext;
}
</script>
The textContent API is useful to get and also set the text content of a node. In your original code, you did not set the content of the Node you were trying to modify (the header, h1). To fix it, just set it to the argument of the callback function you defined. In the DOM, you are passing this.value as the argument for newtext
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent = newtext
}
</script>
</body>
</html>

HTML does not recognize external JS file function

I want to create a simple JS function where I click on a button, and the background changes into the color of that button. I have used an external JS file but even though I have used the function, it shows this error :'changecolor' is defined but never used.
here's the code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span onclick="changecolor('grey')" class="button" id="grey"></span>
<span onclick="changecolor('white')" class="button" id="white"></span>
<span onclick="changecolor('blue')" class="button" id="blue"></span>
<span onclick="changecolor('yellow')" class="button" id="yellow"></span>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor (id) {
document.body.style.background = document.getElementById(id).innerHTML
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span onclick="changecolor('grey')" class="button" id="grey"></span>
<span onclick="changecolor('white')" class="button" id="white"></span>
<span onclick="changecolor('blue')" class="button" id="blue"></span>
<span onclick="changecolor('yellow')" class="button" id="yellow"></span>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor (id) {
document.body.style.background = id;
}
now tell me if it works or not :)
Move script tag into the head section. Or at least put function declaration before its usage (move script tag to the very top of body).
Be sure to use a script tag at the end of the body where you are including the JS file. And to consume the functions of the JS file you should use them bellow the include of the file. This is the recommended approach.
Your tag's greater than mark is in the wrong place.
Move it right after and
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<div id="switch"><!--dont delete this div its here to avoid js to select all elements with class button -->
<span class="button" id="grey"></span>
<span class="button" id="white"></span>
<span class="button" id="blue"></span>
<span class="button" id="yellow"></span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor(id) {
document.body.style.background = id;
}
var rootElem = document.querySelector("#switch");
var buttonArr = rootElem.querySelectorAll(".button");
for (let i = 0; i < buttonArr.length; i++){
buttonArr[i].addEventListener('click', function(){
changecolor(buttonArr[i].id);
}
}
Just drop the name or hex of the color in the id of the button and add as many as you want
Warning Dont remove div with id switch and dont alter the class of the
buttons used for the switching color

Categories