I'm having a problem saying that my cocossd cant load. Do you know whats the issue?
This is my source code:
<!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 src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs/dist/tf.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/coco-ssd"></script>
<img id="img" src="https://www.cdc.gov/importation/images/cat.jpg?_=18560"/>
<script>
const img = document.getElementById('img');
cocoSsd.load().then(model => {
model.detect(img).then(predictions => {
console.log('Predictions: ', predictions);
});
});
</script>
</body>
</html>
Related
I'm trying to make an audio editor but can't seem to get audio value. I've tried document.getElementById("audio).value and document.getElementById("audio").data but both return undefined
<!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>Document</title>
</head>
<body>
<input id="file" type="file">
<button id="save" onclick="save()">Save</button>
</body>
<script>
var audio;
document.getElementById("file").addEventListener("change",function(e){
var read=new FileReader()
read.onload=function(){
var aud=document.createElement("audio")
aud.id="audio"
aud.src=read.result
document.body.appendChild(aud)
aud.play()
}
read.readAsDataURL(document.getElementById("file").files[0])
})
function save(){
var aud=document.getElementById("audio").value
console.log(aud)
var a=document.createElement("a")
a.href=aud
a.download="test.mp3"
document.body.appendChild(a)
a.click()
}
</script>
</html>
The result is undefined because the audio doesn't has a attribute called value instead of value use src
<!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>Document</title>
</head>
<body>
<input id="file" type="file">
<button id="save" onclick="save(event)">Save</button>
</body>
<script>
var audio;
document.getElementById("file").addEventListener("change",function(e){
var read=new FileReader()
read.onload=function(){
var aud=document.createElement("audio")
aud.id="audio"
aud.src=read.result
document.body.appendChild(aud)
aud.play()
}
read.readAsDataURL(document.getElementById("file").files[0])
})
function save(e){
var aud=document.getElementById("audio").src;
var a=document.createElement("a")
a.href=aud
a.download="test.mp3"
document.body.appendChild(a)
a.click()
}
</script>
</html>
Run code snippet
If You use it the audio gonna be downloadable!
I have an assignment where I have to change h1 to whatever is written in the input. I have to do this through making a function with getElementByID.
This is what I have so far
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent=
}
</script>
</body>
</html>
You passed the value (newtext) to your function but never used 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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent=newtext;
}
</script>
</body>
</html>
Try changing your script to this:
function changeh1(newtext) {
document.getElementById("Header").innerText = newtext;
}
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent = newtext;
}
</script>
The textContent API is useful to get and also set the text content of a node. In your original code, you did not set the content of the Node you were trying to modify (the header, h1). To fix it, just set it to the argument of the callback function you defined. In the DOM, you are passing this.value as the argument for newtext
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent = newtext
}
</script>
</body>
</html>
This text is a link. How do I put this into the copy buffer (e.g. via navigator.clipboard.writeText()) so that when the user pastes it somewhere else it retains the link text as well as the link itself?
Thanks in advance!
When u use addEventListener, you can extract all information from the event.
<!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>Test page</title>
</head>
<body>
<a class="link" href="https://stackoverflow.com/">Stackoverflow</a>
<script>
const linkComponent = document.querySelector('.link');
linkComponent.addEventListener('click', (event) => {
event.preventDefault(); // This will prevent the default action (going to link)
navigator.clipboard.writeText(`${event.target.innerHTML} - ${event.path[0].href}`);
});
</script>
</body>
</html>
I use ClipboardJs, it work for gmail or other email clients
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head>
<body>
<div id="container">
test link
</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#container">Click me</button>
<script>
let clipboard = new ClipboardJS(".btn", {})
.on("success", function () {
console.log('success')
})
.on("error", function () {
console.log('error')
});
</script>
</body>
</html>
I get the whole HTML code from JSON using Ajax , The fetched string looks like :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
..
</head>
<body>
<div class="container">
...
</div>
<div id="overlay"></div>
<script></script>
..
</body>
</html>
I want to get the whole code from the div with class container <div class="container"> to this one <div id="overlay"></div>.
How to accomplish that so that I just get the html part I want from the <body> not the whole string?
<script>
(function(window, document){
// `res` is the ajax response string
const res = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
stuff from container.
</div>
<div id="overlay"></div>
</body>
</html>`;
const wrapper = document.createElement("div");
wrapper.innerHTML = res;
let str = '';
str+=wrapper.querySelector("div.container").outerHTML;
str+=wrapper.querySelector("div#overlay").outerHTML;
alert(str);
})(window, document);
</script>
I'm having trouble loading an HTML file that contains AngularJS code!
Here are my snippets:
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="content">
</div>
<script>
$(document).ready(function () {
$('#content').load('page2.html#body');
});
</script>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
{{ value }}
</div>
<script>
//<![CDATA[
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.value = "hello world!";
});
//]]>
</script>
</body>
</html>
page2 alone works just fine! But when I try to load it inside page1, I get the following error message:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…
at HTMLDocument.eval (eval at globalEval (jquery-2.2.4.min.js:2), :294:192)
at i (jquery-2.2.4.min.js:2)
Angular needs jQuery to work (to be exact, it needs jQLite). You should import it also on page2.html, before angular.min.js.
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="jquery-2.2.4.min.js"></script>
<script src="angular.min.js"></script>
</head>