Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="app.js" type="module"></script>
<title>Translation</title>
</head>
<body>
<div>
<input id="inputVerse" type="text"><button type="button" id="btn-verse" onclick="setVerse(document.getElementById('inputVerse').innerText)">Enter</button>
</div>
<div id="divVerseEnglish"></div>
</body>
</html>
here is my app.js
import {getVerse} from "./api.js"
export class SentenceInEnglish {
constructor(sentenceInEnglish, verse) {
this.sentenceInEnglish = sentenceInEnglish
this.verse = verse
}
get sentence(){
return this.sentenceInEnglish
}
// get verse(){
// return this.verse
// }
}
class SentenceInSpanish {
constructor(sentenceInSpanish, verse) {
this.sentenceInSpanish = sentenceInSpanish
this.verse = verse
}
get sentence(){
return this.sentenceInSpanish
}
get verse(){
return this.verse
}
}
export async function setVerse(verse){
console.log(document.getElementById('inputVerse').innerText)
const text = await getVerse(verse)
const verseObject = new SentenceInEnglish(text, verse)
document.getElementById('divVerseEnglish').innerText = verseObject.sentence
}
here is my api.js
const endpoint = "https://bible-api.com/john%20"
export async function getVerse(verseOfJohn) {
try {
let response = await fetch(endpoint + verseOfJohn)
const res = await response.json()
const text = res.text
console.log(text)
return text
} catch (err) {console.log(err)}
}
Webstorm recognize the function but the console says that when I click on the button trying to enter "1:1" for example: "Uncaught ReferenceError: setVerseTest is not defined at HTMLButtonElement.onclick" What is my error? Thanks!