I have embedded the twitter widget in an HTML. I have a JS object that contains URLs of 10 twitter profiles. I want to make a function that would let me replace the current URL (in the widget) with another one from the object.
However when running the script, the href will not change (error say its null).
Does Twitter maybe prevent any changes to href or other tags inside the HTML class?
<!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">
<title>Document</title>
</head>
<body>
<p>
<a class="twitter-timeline" id="twitter" data-width="300" data-height="500" href="https://twitter.com/Tesla"></a>
</p>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<button onclick="change()">Change link</button> <button onclick="check()">Preview link</button>
<script>
var URL = document.getElementById("twitter").href;
console.log(URL);
function change() {
alert(document.getElementById("twitter").href = "https://twitter.com/IBMref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor");
}
function check() {
console.log(document.getElementById("twitter").href);
}
</script>
</body>
</html>
It did change, you just called alert on the change itself.
var URL = document.getElementById("twitter").href;
console.log(URL);
function change() {
document.getElementById("twitter").href = "https://twitter.com/IBM?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor";
alert(document.getElementById("twitter").href);
}
function check() {
console.log(document.getElementById("twitter").href);
}
<!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">
<title>Document</title>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>
<body>
<p>
<a class="twitter-timeline" id="twitter" data-width="300" data-height="500" href="https://twitter.com/Tesla"></a>
</p>
<button onclick="change()">Change link</button>
<button onclick="check()">Preview link</button>
</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 am facing a problem using mathjax. the equations already available are formatted but the equations that I put by myself are not being formatted.
here is my code:
<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>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<input type="text" id="eq">
<button onclick="amb()">equation</button>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').append("`" + eq + "`");
}
</script>
</body>
</html>
First, I suggest use a form and a type=submit button for a better UX.
I found the solution you need to queue an action to rescan the page: MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
<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>
<script async="true" src="https://cdn.jsdelivr.net/npm/mathjax#2/MathJax.js?config=AM_CHTML">
</script>
</head>
<body>
<form onsubmit="amb(); return false">
<input type="text" id="eq">
<input type="submit" value="equation">
</form>
<p id="amb"></p>
<p>`x^3`</p>
<script>
function amb() {
eq = document.getElementById('eq').value;
document.getElementById('amb').innerText = ("`" + eq + "`");
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}
</script>
</body>
</html>
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>
I was getting this error in my console while trying to execute a function using the "onclick" event inside of a button. The error I got was,
Uncaught ReferenceError: foo is not defined
onclick http://localhost:3001/bar:1
onclick http://localhost:3001/bar:1
I defined foo like this in the <body> tag followed by a script tag,
function foo(){
fooBar();
}
Thanks.
Edit: Heres my code.
<!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">
<meta name="description" content="app lol">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title><% title %></title>
</head>
<body>
<script>
function foo() {
fooBar();
}
</script>
<button onclick="foo()">bar</button>
</body>
</html>
<!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"> <meta name="description" content="app lol"> <script src="unpkg.com/axios/dist/axios.min.js">
</script>
<title></title>
</head>
<body>
<script>
function fooBar()
{
alert("hey");
}
function foo()
{
fooBar();
}
</script>
<button onclick="foo()">bar</button>
</body>
</html>
<html>
<head><title></title></head>
<body>
<button id="btn" onClick="foo()">Click me </button>
<script>
btn = document.getElementById("btn");
function foo(){
btn.style.color = "red";
}
</script>
</body>
</html>
This works!
Add an ID to your button. onclick is kinda buggy, because Google security features prevent you from doing so. It is even a good idea to separate JavaScript and HTML.
I usually assign an ID to a div, and querySelector them.
<div id="an-id">
<input />
</div>
document.querySelector("#an-id").querySelector("input").addEventListener("click", foo);
(Put your script after the button)
Is this how your setup looks? If yes, there shouldn't be any error.
<script>
function foo () {
console.log('Foo function');
}
</script>
<button onclick="foo()"> My Button </button>
I want to create a simple JS function where I click on a button, and the background changes into the color of that button. I have used an external JS file but even though I have used the function, it shows this error :'changecolor' is defined but never used.
here's the code:
<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="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span onclick="changecolor('grey')" class="button" id="grey"></span>
<span onclick="changecolor('white')" class="button" id="white"></span>
<span onclick="changecolor('blue')" class="button" id="blue"></span>
<span onclick="changecolor('yellow')" class="button" id="yellow"></span>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor (id) {
document.body.style.background = document.getElementById(id).innerHTML
}
<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="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span onclick="changecolor('grey')" class="button" id="grey"></span>
<span onclick="changecolor('white')" class="button" id="white"></span>
<span onclick="changecolor('blue')" class="button" id="blue"></span>
<span onclick="changecolor('yellow')" class="button" id="yellow"></span>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor (id) {
document.body.style.background = id;
}
now tell me if it works or not :)
Move script tag into the head section. Or at least put function declaration before its usage (move script tag to the very top of body).
Be sure to use a script tag at the end of the body where you are including the JS file. And to consume the functions of the JS file you should use them bellow the include of the file. This is the recommended approach.
Your tag's greater than mark is in the wrong place.
Move it right after and
<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="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<div id="switch"><!--dont delete this div its here to avoid js to select all elements with class button -->
<span class="button" id="grey"></span>
<span class="button" id="white"></span>
<span class="button" id="blue"></span>
<span class="button" id="yellow"></span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor(id) {
document.body.style.background = id;
}
var rootElem = document.querySelector("#switch");
var buttonArr = rootElem.querySelectorAll(".button");
for (let i = 0; i < buttonArr.length; i++){
buttonArr[i].addEventListener('click', function(){
changecolor(buttonArr[i].id);
}
}
Just drop the name or hex of the color in the id of the button and add as many as you want
Warning Dont remove div with id switch and dont alter the class of the
buttons used for the switching color