I've tried different ways but the addEventListener is still not working.
Here's the Html code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Drum Kit</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>
<h1 id="title">Drum š„ Kit</h1>
<div class="set">
<button class="w drum">w</button>
<button class="a drum">a</button>
<button class="s drum">s</button>
<button class="d drum">d</button>
</div>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
and the Javascript code:
var n = document.querySelectorAll(".drum").length;
var i = 0;
while(i <n){
document.querySelectorAll(".drum")[i].addEventListener("click", function () {
console.log("clicked");
alert("clicked!");
});
i++;
}
Help me out with this.
ThankYou
Your code is working fine if it's not working on your LOCAL then make sure your JS file is attached to your HTML file. Check console for error, if any error is there, pls tell me what is it? is it 404 or something else.
As you implemented the script tag below, your HTML and JS file need to be in the same folder.
var n = document.querySelectorAll(".drum").length;
var i = 0;
while(i <n){
document.querySelectorAll(".drum")[i].addEventListener("click", function () {
console.log("clicked");
alert("clicked!");
});
i++;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Drum Kit</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>
<h1 id="title">Drum š„ Kit</h1>
<div class="set">
<button class="w drum">w</button>
<button class="a drum">a</button>
<button class="s drum">s</button>
<button class="d drum">d</button>
</div>
</body>
</html>
You should try
client = new WebSocket("ws://localhost:8000/");
or ready this thread here.
Related
I am trying to call a simple javascript function from my JS page. But it's not working. Getting an error on calling my function by the event.
function searchWord() {
let w = document.getElementById("word")
const xhr = new XMLHttpRequest();
var word = `https://api.dictionaryapi.dev/api/v2/entries/en_US/${w.value}`
xhr.open('GET', word, true);
xhr.onload = function() {
let obj = JSON.parse(this.responseText)
html = ""
html += `<div class="card-body">
<h5 class="card-title" id="urWord">${obj[0].word}
<i class="fas fa-volume-up" id="audio" onclick="textAudio()"></i></h5>
<p class="card-text"><i class="muted">${obj[0].meanings[0].partOfSpeech} | ${obj[0].phonetics[0].text}</i></p>
<p class="card-text">${obj[0].meanings[0].definitions[0].definition}</p>
<p class="card-text"><i class="text-muted">- ${obj[0].meanings[0].definitions[0].example}.</i></p>
</div>`
let notesElm = document.getElementById("mean");
if (obj.length != 0) {
notesElm.innerHTML = html;
} else {
notesElm.innerHTML = `Nothing to show! Use "Add a Note" section above to add notes.`;
}
}
xhr.send();
}
function textAudio() {
console.log(obj[0].phonetics[0].text)
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>API :: Dictionary</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" style="margin: auto;" href="index.html">
API-DICTIONARY
</a>
</div>
</nav>
<div class="container my-3">
<div class="input-group mb-3">
<input type="text" id='word' class="form-control" placeholder="Your Word">
<button class="btn btn-outline-secondary mx-1" type="button" id="SearchBtn" onclick="searchWord()">Search</button>
</div>
<div class="input-group mb-3" style="margin:auto" id="mean">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script src="app.js"></script>
</html>
I am not getting any idea to solve this error. I hope anyone can provide a solution to this error. By the way, I tried many different things. Please anyone can help me?
I had that error before and what fixed it for me was using addEventListener instead of onclick, I still dont know what causes this error tho. I can give you an example on how to use 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></title>
<script src="js/script.js"></script>
</head>
<body>
<h1 id="header-for-testing">Hello there!</h1>
</body>
</html>
and in the .js just do:
window.addEventListener('load', () => {
var header = document.getElementById("header-for-testing")
header.addEventListener("click", someFunction)
})
function someFunction(){
alert("this is a working event!")
}
Oh yea and dont actually use a header, I just used it for showing how to use addEventListener
Does this work for you?
I declared obj and textaudioText outside the functions.
Then used inline js for onclick and deleted testAudio() function.
var obj, textaudioText;
function searchWord() {
let w = document.getElementById("word");
const xhr = new XMLHttpRequest();
var word = `https://api.dictionaryapi.dev/api/v2/entries/en_US/${w.value}`
xhr.open('GET', word, true);
xhr.onload = function () {
var obj = JSON.parse(this.responseText)
var textaudioText = obj[0].phonetics[0].text;
console.log("textaudioText = " + textaudioText);
html = ""
html += `<div class="card-body">
<h5 class="card-title" id="urWord">${obj[0].word}
<i class="fas fa-volume-up" id="audio" onclick="console.log(${obj[0].phonetics[0].text});"></i></h5>
<p class="card-text"><i class="muted">${obj[0].meanings[0].partOfSpeech} | ${obj[0].phonetics[0].text}</i></p>
<p class="card-text">${obj[0].meanings[0].definitions[0].definition}</p>
<p class="card-text"><i class="text-muted">- ${obj[0].meanings[0].definitions[0].example}.</i></p>
</div>`
let notesElm = document.getElementById("mean");
if (obj.length != 0) {
notesElm.innerHTML = html;
} else {
notesElm.innerHTML = `Nothing to show! Use "Add a Note" section above to add notes.`;
}
}
xhr.send();
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>API :: Dictionary</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" style="margin: auto;" href="index.html">
API-DICTIONARY
</a>
</div>
</nav>
<div class="container my-3">
<div class="input-group mb-3">
<input type="text" id='word' class="form-control" placeholder="Your Word">
<button class="btn btn-outline-secondary mx-1" type="button" id="SearchBtn"
onclick="searchWord()">Search</button>
</div>
<div class="input-group mb-3" style="margin:auto" id="mean">
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"
integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
crossorigin="anonymous"></script>
<script src="app.js"></script>
</html>
My issue is that when I click on the button, the div container wouldn't fade in. Can anyone help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="stlye1.css">
<title>Document</title>
<script src="myscripts.js"></script>
</head>
<script>
$("#header1").click(function () {
$("#section_one").fadeIn('fast');
});
</script>
<body>
<button type="button" id="header1">div 1</button>
<div id="section_one" class="parallax1">
<div>
<h1>text</h1>
</div>
</div>
</body>
</html>
Your problem is that you don't tell the div to hide with the style="display: none".
There is you code back
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="stlye1.css" />
<title>Document</title>
<script src="myscripts.js"></script>
</head>
<body>
<button type="button" id="btn1">div 1</button>
<div id="div1" class="parallax1" style="display: none">
<div>
<h1>text</h1>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#div1").fadeIn("fast");
});
});
</script>
i have tried everything in order to fix the issue and even looked at the video of the tutorial im learning from but can't seem to get it working crrectly. Even checked around the internet. i added the javascript code so you guys can see that i did define it. im new to all this so explaining it best you can would be greatly appreciated
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" onclick='ageInDays()'>Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
function ageInDays() {
let birthYear = prompt("what year were you born...Good friend?");
}
It not working because you are using in line script for the invocation of the ageInDays function, but the definition is in another file that has not loaded when the browser read the inline JS so there are two ways of fixing this.
Use an inline script so the JS is already on the browser same time as HTML like
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" onclick="ageInDays()">Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script>
function ageInDays() { let birthYear = prompt("what year were you born...Good friend?"); }
</script>
</body>
</html>
handle everything in the script file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" id="action">Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
and in the main.js
const button = document.getElementById('action');
button.addEventListener('click', function(){
let birthYear = prompt("what year were you born...Good friend?");
});
Add this to your script.js file, and remove onclick='ageInDays()' from your button.
let btn = document.querySelector(".btn-primary");
btn.addEventListener("click", ageInDays);
function ageInDays(){
//code to be executed when you clicked the button
}
Im writing a program to monitor prices on the steam market and im building a UI in electron, the issue is that when i click a button it doesn't register.
i have tried with logging it to console or sending to a new window or opening a link but it doesn't work. I tired using an .on('click', .... as well
index.js:
const {BrowserWindow} = require('electron').remote
const path = require('path')
const {shell} = require('electron')
const launchbtn = document.getElementById('launch')
launchbtn.addEventListener('click', (event) => {
const modalPath = path.join('file://', __dirname, 'launch.html')
let win = new BrowserWindow({ width: 400, height: 320 })
//shell.openExternal('http://electron.atom.io') tried but didnt work
win.on('close', () => { win = null })
win.loadURL(modalPath)
win.show()
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">Market-Monitor</p>
<h1 id="About">By SourcE</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">Monitor Prices of items</span></p>
</div>
<div id="right-container">
<button id="launch">Launch</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
launch.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">test</p>
<h1 id="About">test</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">test</span></p>
</div>
<div id="right-container">
<button id="launch">test</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
If the button was to work it should open a new instance of the window with the text changed to text.
Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">test</p>
<h1 id="About">test</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">test</span></p>
</div>
<div id="right-container">
<form name="form-name" action="launch.php">
<input type="submit" name="submit" value="Button Name">
</form>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
New File call it launch.php
<?php
if ( isset( $_POST['submit'] ) ) {
header("Location: <LINK>");
}
?>
You can easily open a new window via Javascript. Below you can see the code. You just have to do a quick query.
<button class="btn btn-success" onclick="location.href='http://google.com';"> Google</button>
Do that with php and a form. The form should have the action of the php file and in the php file you make a query if he has clicked submit and then you make a header location: index ...... etc. I can sent you a code if you want.
I have a silly problem I think, but I've tried several answers found on the net and nothing works so far.
I'd just like to have an id=modal
Here's the code:
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Cabinet</title>
<link rel="shortcut icon" href="img/logo-min.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style-sheet.css">
<link rel="stylesheet" href="css/mystyles.scss">
</head>
<body>
<main>
<div class="container">
<section class="columns">
<div>
<button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus dāinfomartions...</button>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<p class="modal-card-title modal__title"></p>
</section>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
<script type="text/javascript" src="js/burger.js"></script>
</html>
script:
const modal = document.getElementById('modal');
console.log('modal', modal);
function toggleClass() {
modal.classList.toggle('is-active');
}
And modal return null,I can't get the id.
I don't see where you inject/insert your script.
You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- My super html -->
<script src="path/to" type="text/javascript"></script>
</body>
</html>