How can I access DOM elements in Electron Js App? - javascript

I am creating a Electron JS webapp with multiple pages for a project.
So far I have created a new page in a different folder for my To Do list feature.
I am running into a problem because when I enter a new task in the form It does not appear when I click submit.
Here is what is supposed to look like after I clicl Add New Task.
[![enter image description here][1]][1]
Here is what my task list looks like when I try to add a new task.
[![enter image description here][2]][2]
Here is my script.js file and html file. I appreciate any help you can give me!
SCRIPT.JS
//Uses ids that was created in html
const form = document.querySelector("#new-task-form");
const input = document.querySelector("#new-task-input");
const list_el = document.querySelector("#tasks");
form.addEventListener('submit', (e) => {
e.preventDefault();//stop the page from refreshing after submitting task
const task = input.value;
//Prevent user from submitting a empty task
if (!task) {
alert("Please enter out the task!");
}
else {
console.log("Success");
return;
}
//Getting task elements to display on page by creating DOM nodes
const task_el = document.createElement("div");
task_el.classList.add("task");
const task_content_el = document.createElement("div");
task_content_el.classList.add("content");
//Set inner value to task
task_actions_el.innerText = task;
task_content_el.appendChild(task_content_el);
task_content_el.appendChild(task_el);
})
})
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>Task List</title>
<link rel="stylesheet" href="styles.css" />
</head>
<div class="datetime">
<div class="time"></div>
<div class="date"></div>
</div>
<body>
<header>
<h1>Task List</h1>
<form id="new-task-form">
<input
type="text"
name="new-task-input"
id="new-task-input"
placeholder="What do you have planned?" />
<input
type="submit"
id="new-task-submit"
value="Add task" />
</form>
</header>
<main>
<section class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input
type="text"
class="text"
value="A new task"
readonly>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</section>
</main>
<script src="script2.js"></script>
</body>
</html>```
[1]: https://i.stack.imgur.com/aeUhW.png
[2]: https://i.stack.imgur.com/fZYrM.png

Related

Webpage eventlistener and script section not running

Trying to make a basic webpage where you can type a message for it to be displayed on the website. However, the script section of my website does not seem to work.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
document.addEventListener('DOMContentLoaded', function()
{
let submit = document.querySelector('#submit');
submit.addEventListener('click',function()
{
let questions = document.querySelectorAll('.question');
let input = document.querySelector('input');
for (let i =0; i< questions.length; i++)
{
if questions[i].innerHTML == ""
{
questions[i].innerHTML = 'a';
}
else
{
continue;
}
}
});
function myfunction()
{
alert('test');
}
});
</script>
<title>Write A Message!</title>
</head>
<body class="p-3 mb-2 bg-secondary text-white">
<h1>How to write a message</h1>
<hr>
<p>Type a Message into the textbox below to display a public letter!</p>
<div>
<input type = 'text'>
<button id = 'submit'>Type a message!</button>
</div>
<div>
<h1>Message 1!</h1>
<hr>
<p class = 'question'></p>
<h2>Message 2!</h2>
<hr>
<p class = 'question'></p>
<h3>Message 3!</h3>
<hr>
<p class = 'question'></p>
<button onclick = 'myfunction()'>test</button>
</div>
</body>
</html>
I tried adding a button that would display an alert as well but it does not run as well when clicked.
First, javscript that contains listener/reference to DOM elements is better to include in the end on body, avoid putting in head.
Second, myfunction() is not accessible bebcause you included it under DOMContentLoaded. It should be outside of the listener (global scope).
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Write A Message!</title>
</head>
<body class="p-3 mb-2 bg-secondary text-white">
<h1>How to write a message</h1>
<hr>
<p>Type a Message into the textbox below to display a public letter!</p>
<div>
<input type='text'>
<button id='submit'>Type a message!</button>
</div>
<div>
<h1>Message 1!</h1>
<hr>
<p class='question'></p>
<h2>Message 2!</h2>
<hr>
<p class='question'></p>
<h3>Message 3!</h3>
<hr>
<p class='question'></p>
<button onclick='myfunction()'>test</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
let submit = document.querySelector('#submit');
submit.addEventListener('click',function(){
let questions = document.querySelectorAll('.question');
let input = document.querySelector('input');
for (let i =0; i< questions.length; i++){
if (questions[i].innerHTML == ""){
questions[i].innerHTML = 'a';
} else {
continue;
}
}
});
});
function myfunction() {
alert('test');
}
</script>
</body>
</html>

How to redirect button to the correct html pages using if else

I have 3 html files for this page. index.html, positive review page and negative review page. I want my JavaScript to redirect to the pages after clicking the emojis feedback and then the button. After clicking the button depending on the emojis clicked it should redirect to the negative review page if the emoji selected is neutral or unhappy and if the emoji selected is satisfied to redirect to the positive review page. I am new and stuck with the below code. The below code takes me back to the positive review page.
const sendButton = document.querySelector("#send");
const panelContainer = document.querySelector(".panel-container");
const ratings = document.querySelectorAll(".rating");
const experience = document.querySelectorAll("small");
sendButton.addEventListener("click", () => {
for (let i = 0; i < experience.length; i++) {
// console.log(experience[i].innerHTML);
if (
experience[i].innerHTML === "Unhappy" ||
experience[i].innerHTML === "Neutral"
) {
window.location = "negative_review.html";
} else {
window.location = "positive_review.html";
}
}
});
This is the index page only.
<!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" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Feedback</title>
</head>
<body>
<div id="panel" class="panel-container">
<h2>Welcome Text</h2>
<strong
>How was your experience <br />
with us?
</strong>
<div class="ratings-container">
<div class="rating">
<img
src="https://cdn-icons-png.flaticon.com/128/742/742752.png"
alt=""
/>
<small>Unhappy</small>
</div>
<div class="rating">
<img
src="https://cdn-icons-png.flaticon.com/128/725/725085.png"
alt=""
/>
<small>Neutral</small>
</div>
<div class="rating active">
<img
src="https://cdn-icons-png.flaticon.com/128/166/166549.png"
alt=""
/>
<small>Satisfied</small>
</div>
</div>
<form>
<label for="feedback">Please Tell Us About Your Experience</label>
<textarea name="" id="" maxlength="350" cols="30" rows="10"></textarea>
</form>
<button class="btn" id="send">Send Review</button>
</div>
<script src="script.js"></script>
</body>
</html>
It looks like the correct experience to use is the one surrounded by <div class="active">
sendButton.addEventListener("click", () => {
const experience = document.querySelector(".rating.active small");
if (
experience[i].innerHTML === "Unhappy" ||
experience[i].innerHTML === "Neutral"
) {
window.location = "negative_review.html";
} else {
window.location = "positive_review.html";
}
});

Uncaught TypeError: Cannot read property 'value'

So I am trying to create a basic function that sets my username variable to lowercase but I keep receiving a TypeError
Error message : index.js:12 Uncaught TypeError: Cannot read property 'value' of undefined
at HTMLFormElement.onSubmit (index.js:12)
If anyone could catch what I am doing wrong here I would greatly appreciate it.
const logform = document.querySelector('#logform');
var username = document.querySelector('#usernameinput');
const password = document.querySelector('#passwordinput');
logform.addEventListener('submit', onSubmit);
function onSubmit(e) { //takes in event parameter
e.preventDefault();
var username = username.value.toLowerCase();
console.log(username.value);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login Portal</title>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<div class="loglogo">
<!-- logo container -->
<a href="https://www.waspc.org/" target="_blank">
<img src="IMAGE/logo.png" alt="IMAGE">
</a>
</div>
<form id="logform">
<div class="logscreen">
<!-- login container -->
<label><strong>Username</strong></label>
<!-- Username field -->
<input autocomplete="off" id="usernameinput" type="text" name="" placeholder="Enter Username" required>
<label><strong>Password</strong></label>
<!-- Password field -->
<input id="passwordinput" type="password" name="" placeholder="Enter Password" required>
<button type="submit">Login</button>
<!-- Login button -->
<button class="newbutton" type="button">New User</button>
<!-- New User button -->
<button type="reset">Cancel</button>
<!-- Cancel button -->
</div>
</form>
<script src="JS/index.js"></script>
</body>
</html>
I think this may be a naming conflict with username. See below:
const elUsernameInput = document.querySelector('#usernameinput');
const elPasswordInput = document.querySelector('#passwordinput');
logform.addEventListener('submit', onSubmit);
function onSubmit(e) { //takes in event parameter
e.preventDefault();
const username = elUsernameInput.value.toLowerCase();
console.log(username.value);
}
If this doesn't work:
Make sure your script is included after the input fields and form fields in the HTML.
Make sure logform is set somewhere. You may need another lookup, like const elLogForm = document.querySelector('#logform').
Make sure the ids you've specified in the script are present on the correct elements.

Simple HTML page getting JS errors- "SyntaxError: missing ; before statement" and "ReferenceError: calculateAdvantage is not defined"

I'm new to JS, and I've looked online, but I'm still not sure why I'm getting these errors. I have an index.html and a CSS sheet. The JS seems to be problematic but I can't figure out why.
The user is supposed to input a few values, click the button, and then the function should trigger and make a change to the "result" div element.
Index.HTML
<html>
<head>
<title>Out of Shield Options</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/main.css"
</head>
<body>
<h1>Out of Shield</h1>
<div class="navbar">
<ul>
<li>Home</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
<h2>Calculator</h2>
<div id="inputInfo">
<div class="inputLabel">
<label>Hit Frame:</label><input type="text" class ="textField" id="hitFrame" class="inputs" value="0"></input>
</div>
<div class="inputLabel">
<label>IASA Frame:</label><input type="text" class ="textField" id="iasaFrame" class="inputs" value="0"></input>
</div>
<div class="inputLabel">
<label>Damage:</label><input type="text" class ="textField" id="damage" class="inputs" value="0"></input>
</div>
<div class="submit"><input id="calculateButton"type="button" value="Calculate!" onclick="calculateAdvantage()"></div>
<div id="result"></div>
</div>
<script>
calculateAdvantage(){
var hitFrame = document.getElementById("hitFrame");
var IASA = document.getElementById("iasaFrame");
var damage = document.getElementById("damage");
var shieldStun = (damage / 1.75) + 2;
var result = IASA - hitFrame - shieldStun;
document.getElementById("calculateButton").innerHTML = result;
}
</script>
</body>
</html>
You must declare calculateAdvantage as a function:
function calculateAdvantage() {
// Your code goes there
}

Disable on click event after three clicks then display "done" on the button after last click

Below is the code that I have for an onclick event.
What I am trying to do is after the last students information is displayed, I want the button to be disabled and display done instead of next.
I have my JS code here and my HTML code below that. I have already tried the .one method with no success.
My JS code:
var studentInfo=[
{
name: 'Sabrina Hill',
address:{street:'172 Brushcreek Dr',city:'Sanford',state:'FL'},
gpa:[3.2,3.7,4.0]
},{
name: 'JoelOsteen',
address:{street:'3226 Lilac Dr', city:'Chicago',state:'IL'},
gpa:[3.0,2.7,2.0]
} ,{
name: 'Superman',
address:{street:'123 Test Dr', city:'Maple Shade',state:'NJ'},
gpa:[3.4,2.7,2.7]
}
];
function el(id){ return document.querySelector(id); }
function displayInfo(){
var st = studentInfo[c];
el('#name').innerHTML = 'Name: '+ (st.name);
el('#address').innerHTML = 'Address: '+(st.address.street+' '+st.address.city+' '+st.address.state);
el('#gpa').innerHTML='GPA: '+st.gpa[c]+' ,'+st.gpa[1]+' ,'+st.gpa[2];
}
el('#info_btn').addEventListener('click', function(){
displayInfo();
c = ++c % studentInfo.length; // Increase Array pointer and loop
}, false);
My HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Student Info</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="form_box">
<div id="contact-form">
<p class="heading">Display Students Information Below:</p>
<div id="form-box">
<div id="output">
<div id="name">
<p></p>
</div>
<div id="address">
<p></p>
</div>
<div id="gpa">
<p></p>
</div>
<div id="date">
<p></p>
</div>
<div id="gpaavg">
<p></p>
</div>
<div id="phone">
<p></p>
</div>
<!-- <div class="clear"></div> -->
</div>
<div id="info_box">
<div id="info_btn">
<h4 id="round" class="heading">Click To See Next Student</h4>
Next
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

Categories