Hi I'm trying to learn javascript, from these tutorials: https://javascript.info/searching-elements-dom, but I've got stuck and not been able to find a solution to the issue. Apologies if this is a recurring question, but I was not able to find a solution using google, all the answers were that the script needed to be at the bottom of the page which I have. Basically, this works fine:
<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" type="text/css" href="mystyle.css">
<title>Javascript Learning</title>
</head>
<body>
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "test", "passed"
}
</script>
But putting the javascript in a separate file like I have will all the other lessons so far. Both .html and .js are in the same folder.
index.html:
<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" type="text/css" href="mystyle.css">
<title>Javascript Learning</title>
</head>
<body>
<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script src="main.js"></script>
</body>
</html>
main.js:
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML);
}
The browser gives me this error:
Uncaught TypeError: elements is not iterable
file:///home/me/javascript/main.js:26
main.js:26:18
I assumed I must have made an error somewhere, so I cut and pasted straight out of the tutorial to make sure I had not made a syntax error, but still it works if inside the html file and not if it's in it's own separate javascript file. How can this be fixed, I'm fairly sure querySelectorAll is exactly what I need for my site, but I want the javascript in a separate file to keep my code consistent.
Related
I need to log on site, and parse info.
I am trying to do this: powershell invoke-webrequest to log into website
But I can not find the form...
If I use function view page source in the browser I see only:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#ffffff"><link rel="icon" href="/frontend/favicon.ico">
<link href="/frontend/css/99.ad9d8c.css" rel="stylesheet"><link href="/frontend/css/style.aa5ad6.css" rel="stylesheet">
</head>
<body>
<div id="content"></div>
<script src="/frontend/js/modules/vendors~index.ad9d8c.chunk.js"></script>
<script src="/frontend/js/index.275be7.bundle.js"></script>
</body>
</html>
Update
I am try next, but this not work for me.
$ieObject = New-Object -ComObject 'InternetExplorer.Application'
$ieObject.Navigate('http://XXX.XXX.XXX.XXX:8090/frontend/login')
$currentDocument = $ieObject.Document
$currentDocument.IHTMLDocument3_getElementsByTagName("input") | Select-Object Type,Name
Error
You cannot call a method on a null-valued expression.
when creating a basic html layout as shown below, i keep getting "[violation] avoiding using document write()" error. However when i remove the body tag, the error is gone.
Does anyone know why its happening and is there any alternative for me to use.
Thanks,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Update:
The source tab on chrome developer console, is highlighting the line inside the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script id="bs_script">
//<![CDATA[ document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname)); //]]>
</script>
</body>
</html>
The script tag within the HTML is the issue.
Additionally: Browsersync inserts a document.write() script tag into any first tag, even if that first tag is commented out. So using a different live browser reload solved the issue
Is there a way to fetch sequence (with vanilla JS) from NCBI database link?
https://www.ncbi.nlm.nih.gov/protein/KTC77672.1?report=fasta&log$=seqview&format=text
I done this with other database (uniprot) and it worked. But NCBI might have some differences.
async function getData(url) {
const data = await fetch(url);
return data.text();
}
const test = getData('https://www.uniprot.org/uniprot/E5G0U9.fasta').then((r) => console.warn(r));
test.html:
<!DOCTYPE html>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>test</title>
</head>
<body>
test
</body>
<script src="test.js"></script>
The link in your question does not return FASTA format as plain text. It returns HTML using the pre tag to make it look like plain text.
You should be using the NCBI E-utilities API - in particular, the efetch method.
The URI for your example protein looks like this:
https://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=protein&id=KTC77672.1&rettype=fasta
So try that in your Javascript function. Seems to work in my Chrome console (see image).
Just started with GSAP Tweenmax, but i ran in some issues. Probably it's a stupid mistake i made, but i can't figure it out.
When i run this code on Codepen it works, but when i run it from my webserver it doesn't do anything.
HTML:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!--CDN links for TweenLite, CSSPlugin, and EasePack-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="./js/main-test.js"></script>
<style>
#svg{position: absolute;}
</style>
</head>
<body>
<div id="svg"><p>testtesttesttest</p></div>
</body>
</html>
And this is the js:
var anim = document.getElementById('svg');
TweenMax.to(anim, 2, {left:"100px"})
Can someone please tell me what i'm doing wrong?
Thank you,
Michael
I already found the issue, i loaded the js script in the header.
The only thing i needed to do was to replace the script at the end of the html file so it could find the 'id' of the div to animate.
so I'm trying to setup PapaParser to parse a CSV file onto arrays that I can later use with another script to make graphs. So far I just want to paste the strings from my arrays onto the blank div, so I can see what's going on. I am new to this and have no idea how to import javascript libraries, so I copied the files into my public_html folder. Now NetBeans seems to see them.
Long story short I'm stuck at the beginning, I get a reference of ReferenceError: Papa is not defined when I try to run my parser.
Any input or a link to a tutorial on how to do this would be greatly appreciated (tried googling, found nothing of use). I've added my code so far...
Papa.parse("TopPercentilesCSV.csv", {
complete: function(results) {
console.log("Finished:", results.data);
}
});
.displaypanel {
border: 1px solid black;
width:400px;
height:400px;
margin:auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Parsing CSV test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="index.js"></script>
<script src="PapaParse/papaparse.js"></script>
</head>
<body>
<div class="displaypanel">
</div>
</body>
</html>
Change your code to this:
<!DOCTYPE html>
<html>
<head>
<title>Parsing CSV test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css"/>
<script src="PapaParse/papaparse.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="displaypanel">
</div>
</body>
</html>
First you have to include the library, then you can call function defined inside