How to run javascript selenium function using a html button? - javascript

This code works fine but I need to run this script on a html button means when the button is clicked then this function get executed!!!
async function example() {
let driver = await new Builder().forBrowser("chrome").build();
await driver.get("https://google.com");
}
example();
I tried this but not working,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Testing</title>
</head>
<body>
<script type="text/Javascript">
async function example()
{
const {Builder, By, Key, util} = require("selenium-webdriver")
let driver = new Builder().forBrowser("chrome").build();
driver.get("https://google.com");
driver.findElement(By.name("q")).sendKeys("Selenium",KEY.RETURN);
}
</script>
<button onClick="example()">Click me</button>
</body>
</html>
Error:
index.html Uncaught ReferenceError: example is not defined
at HTMLButtonElement.onclick
and, I also tried it with external js but it still not working

selenium-webdriver cannot run inside a web browser, the APIs it needs are not available.
You would need to rewrite the JS so it runs in Node.js.
If you wanted to access it from a web browser, then you would need to write a web service front end for it.
You could then access that web service from the browser with, for example, fetch.

Related

The api call works properly when run in node, but when adding it into Html it gives network errors

I am trying to learn how to use the api and trying to print the bitcoin value. When running in node the api call is working and giving the correct output, but in html when the pi is called it is giving network errors. I tried running it in different ide's and applied other things i found on google but had no luck.
Heres my current code,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Geo Guesser</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id="price"></h1>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const apiKey = "key";
const url = `https://pro-api.coinmarketcap.com/v1/cryptocurrency/quotes/latest? symbol=BTC&CMC_PRO_API_KEY=${apiKey}`;
window.onload = function() {
axios.get(url)
.then(response => {
const bitcoinData = response.data.data.BTC;
const price = bitcoinData.quote.USD.price;
document.getElementById("price").innerHTML = `Bitcoin price: $${price}`;
})
.catch(error => console.log(error))
}
</script>
</body>
</html>
Also, do u recomend using a different api?
Thank you in advacne
I tried different methods to calll the api, fetch, azios, etc.
Double checked the key and links and api documentation.
Made sure calls were being made by checking the console

How to import pdf.js using cdn

I wanted to use pdf.js for a project of mine but I faced an issue of importing it, basically, the CDN doesn't work
Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist#2.7.570/build/pdf.min.js"></script>
</head>
<body>
<canvas id="my-canvas"></canvas>
<script>
pdfjsLib.getDocument('./ahmed.pdf').then(doc => {
console.log("this file has" + doc._pdfInfo.numPages);
});
</script>
</body>
</html>
and that is the errors that my console shows
Deprecated API usage: No "GlobalWorkerOptions.workerSrc" specified.
Uncaught TypeError: pdfjsLib.getDocument(...).then is not a function
So what should i do to solve this problem and thank you so much
You have to set GlobalWorkerOptions.workerSrc to /build/pdf.worker(.min).js of same version:
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdn.jsdelivr.net/npm/pdfjs-dist#2.7.570/build/pdf.worker.min.js"; 👈
pdfjsLib.getDocument('./ahmed.pdf').promise.then(doc => {
console.log(`This document has ${doc._pdfInfo.numPages} pages.");
});
And, as #Pasi has mentioned, you have to promisify .getDocument() by chaining .promise on it. Without it, there is no .then().
See the "Hello World with document load error handling" example on this page to get started: https://mozilla.github.io/pdf.js/examples/
(Your snippet is missing .promise after getDocument() and setting the workerSrc property)

How can the client-side listen for anything outside the web page without the server-side?

What I want to do is use JavaScript (or some other client-side way) to listen for events occurring outside the web page without server-side help. It might look like this:
// tester.js
cses = new ClientSideEventSource("JSEventSource.js");
cses.onmessage = function(event){
// do something
}
// JSEventSource.js
CSES_return("CSES has been run!");
// note how this is client-side
The problem here is that this is all imaginary because those functions (sadly) don't exist. AJAX calls to JS files don't work. Here is an example of it's usage:
function getNotifications()
{
var cses = new ClientSideEventSource("JSEventSource.js");
cses.onmessage = function(event){alert(event.data)}
}
function sendNotification()
{
CSES_return("You have got a notification!");
// this does not give an error even if this is not used in CSES mode
// which is started with: new ClientSideEventSource("jsfile.js");
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test</title>
<meta charset="UTF-8"/>
</head>
<body>
<button onclick="getNotifications()">Get Notifications</button>
<button onclick="sendNotification()">Send Notification</button>
</body>
</html>
<!-- You will get errors because ClientSideEventSource and CSES_return do not exist -->
That is basically a messaging system (with a certain message) that doesn't use any Server-Side code. Is there anything to replicate this?

Calling a javascript function from another javascript file and getting Reference errors and Invalid state errors and some warnings inside atom IDE

I am a new to javascript coding in p5 and i am getting errors when trying to call a function from another javascript file. Here is my html file:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>
<script src="file.js"></script>
</head>
<body>
</body>
</html>
Here is my javascript file 1:
function setup() {
createCanvas(400,400);
}
function draw(){
pr("hello world",x,y);
}
Here is my javascript file 2:
function pr(text,x,y){
text(text,x,y);
}
I edited the function arguments because i forgot that text function has a different sytnax than i wrote. Still getting errors:
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
Use of the orientation sensor is deprecated. p5.min.js:3:232007
Use of the motion sensor is deprecated. p5.min.js:3:232007
ReferenceError: x is not defined
The files has different scope, so one isn't aware of the other. If you want a function to be accessible from another file you need to add it to a shared scope. You can put it on the window (global scope) object and then to use it elsewhere.
file1:
function there(text){
console.log(text)
}
window.there = there
file2:
function here(){
there("hello world");
}
here()
In your html file you should first import file1 and after that file2. That way when you call it it is already the.
NOTE: writing on the window object is not a good practice! you should probably find a tool that creates a bundle an let you access a function from another file. Check Webpack for example.

How to grab the "response" of the server using JQuery?

Please have a look at the below code.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/1.1.0/annyang.min.js"></script>
<script>
if (annyang) {
// Let's define our first command. First the text we expect, and then the function it should call
var commands = {
'hello': function() {
alert("Hello!");
}
};
// Add our commands to annyang
annyang.addCommands(commands);
// Start listening. You can call this here, or attach this call to an event, button, etc.
// annyang.start();
}
</script>
</head>
<body>
<div>TODO write content</div>
<button onclick="annyang.start();">Start</button>
</body>
</html>
The JavaScript code sends the data to a external server and get the response. The imported JS file can be found from here - https://github.com/TalAter/annyang
My question is, how can I view the "response" which I get from the server?
To see the results returned in the console, turn on debug mode by adding this:
annyang.debug();
Alternatively, to capture all recognized text in a function, simply add a catch-all function
annyang.addCommands({
'*transcript': function(transcript) {
console.log(transcript);
}
});
P.S. I think you want to uncomment your start() command.

Categories

Resources