I'm trying to change a picture in a webpage using the tag button and the onclick attribute that call a function that I did in a js document, but it isn't working, this is what a did:
in Javascript:
function store (a,z) {
var pic;
if (a>z) {
pic = "images_weddings/desing_logo-01.jpg";
}else{
pic = "images_weddings/rose1.jpg";
}
document.getElementById('change1').src = pic;
}
and in html:
MATRIMONIOS
<div>
<img src="images_weddings/desing_logo-01.png" id="change1" >
</div>
<button type="button" onclick="store(2,3)">change the image</button>
I change links to images and code works - strange in your code is that in html you have PNG file "desing_logo-01.png" but in js you have JPG file "desing_logo-01.jpg"
function store (a,z) {
var pic;
if (a>z) {
pic = "https://i.ytimg.com/vi/ktlQrO2Sifg/maxresdefault.jpg";
}else{
pic = "https://thechive.files.wordpress.com/2018/03/girls-whose-hotness-just-trumped-cute-89-photos-257.jpg?quality=85&strip=info&w=600";
}
document.getElementById('change1').src = pic;
}
<div>
<button type="button" onclick="store(2,3)">change the image</button>
<img src="https://i.ytimg.com/vi/ktlQrO2Sifg/maxresdefault.jpg" id="change1" >
</div>
Try this code in your lapy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title> </title>
</head>
<body>
<div>
<img src="images_weddings/desing_logo-01.png" id="change1" >
</div>
<button type="button" onclick="store(2,3)">change the image</button>
<script type="text/javascript">
function store (a,z) {
var pic;
if (a>z) {
pic = "images_weddings/desing_logo-01.png";
}else{
pic = "images_weddings/rose1.png";
}
document.getElementById('change1').src = pic;
}
</script>
</body>
Related
I got this image url
https://images.lvrcdn.com/MediumRetina75I/DL1/101_266d32b0-4f23-4cca-b1c2-a8b7bb27dbb0.JPG
I need to enable preview to use it in discord embeds for example, but site hasn't enabled the link preview.
Cause image urls are different from the same website I made a html page with javascript code to display image and preview's metadata taking image url from url parameter eg: my website.html?url=imageurl/name.png.
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=0.1">
<!-- open graph -->
<!-- Informations -->
<meta property="og:description" content="OPEN_GRAPH_DESCRIPTION" />
<meta property="og:title" content="OPEN_GRAPH_TITLE" />
<meta property="og:type" content="website" />
<meta property="og:url" content="WEBSITE_URL" />
<!-- Image -->
<meta id="meta1" property="og:image" content />
<meta property="og:image:alt" content="Website icon" />
<meta property="og:image:height" content="80" />
<meta id="meta2" property="og:image:secure_url" content/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="80" />
<meta property="og:locale" content="en_GB" />
<!-- ... --->
<script type="text/javascript">
function getParameter(paramName) {
var searchString = window.location.search.substring(1), i, val, params = searchString.split("&");
for ( i = 0; i < params.length; i++) {
val = params[i].split("=");
if (val[0] == paramName) {
return val[1];
}
}
return null;
}
function getUrlData() {
var param = getParameter("ref");
document.getElementsByName("img-area")[0].src = param;
document.getElementById("meta1").setAttribute("content", param);
document.getElementById("meta2").setAttribute("content", param);
}
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
</script>
<title>Preview</title>
</head>
<body style="margin: 0px; background: #0e0e0e; height: 100%" onload="getUrlData()">
<img id = "preview" name="img-area" src style="display: block; margin: auto; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);" alt="prev">
<canvas id="myCanvas" />
<!-- ... --->
</body>
</html>
If I go to my website link with the image url in parameter it is working well, it displays the image and correct metadata.
But it is still not showing the image in preview, but only the description and titles tag.
How can I show image in the link preview too?
hello my code isn't working idk why i tried to make textarea char counter that only shows the chachter not maxiumum
here is the java script
let text = document.querySelector('#text');
let number = text.value.length;
let count = document.querySelector('#count');
text.addEventListener("input", updateCount());
function updateCount(){
count.value + number
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
In your text.addEventListener("input", updateCount()); assignment you did not assign the function updateCount to the input event of the selected element but instead you executed it once and assigned the non-existent return value of the function call to the event.
And in the function itself you will need to put (=assign) the calculated count somewhere too:
let text = document.querySelector('#text');
let count = document.querySelector('#count');
text.addEventListener("input", updateCount);
function updateCount(ev){
count.textContent=ev.target.value.length;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
<script src="main.js"></script>
</body>
</html>
ev.target.value.length gets the current length of the <textarea> element and count.textContent= assigns it to the target <span>.
A better way is by subscribing to the keyup event and getting the value from the scope using this keyword
function characterCount() {
document.getElementById('text').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karakter sayısı</title>
</head>
<body>
<div class="ses">
<textarea id="text" placeholder="Yazıyı buraya Kopyala veya Yaz" onchange="characterCount()"></textarea>
</div>
<span id="filhu">Bu kadar yazdın:</span><span id="count">0</span>
</body>
</html>
In this code, I'm trying to assign DOM elements to variables, but variables get the value null. Why is it happening? Have I made some mistake?
<!DOCTYPE html>
<html>
<head>
<title>Tasks</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A simple task list for your day-to-day.">
<meta name="author" content="Bruno M. B. Sdoukos">
<meta name="keywords" content="task list, checklist">
<script>
var taskCreator = document.querySelector('#taskcreator');
var list = document.querySelector('ul');
var taskInput = document.querySelector('#taskinput');
</script>
</head>
<body>
<ul></ul>
<input type="text" id="taskinput">
<button id="taskcreator">Create new item</button>
</body>
</html>
When browser executes your javascrit there is no input and button yet.
You can fix it with
<!DOCTYPE html>
<html>
<head>
<title>Tasks</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A simple task list for your day-to-day.">
<meta name="author" content="Bruno M. B. Sdoukos">
<meta name="keywords" content="task list, checklist">
</head>
<body>
<ul></ul>
<input type="text" id="taskinput">
<button id="taskcreator">Create new item</button>
<script>
var taskCreator = document.querySelector('#taskcreator');
var list = document.querySelector('ul');
var taskInput = document.querySelector('#taskinput');
taskCreator.addEventListener('click', function createNewTask(event) {
list.innerHTML += '<li>' + taskInput.value + '</li>'
})
</script>
</body>
</html>
Or wait in the script until whole file will have been parsed.
<script>
document.addEventListener("DOMContentLoaded", function () {
var taskCreator = document.querySelector('#taskcreator');
var list = document.querySelector('ul');
var taskInput = document.querySelector('#taskinput');
taskCreator.addEventListener('click', function createNewTask(event) {
list.innerHTML += '<li>' + taskInput.value + '</li>'
})
});
</script>
https://developer.mozilla.org/ru/docs/Web/Events/DOMContentLoaded
I am trying to display data randomly in my file 'question.json' on HTML but somehow there's nothing happened. I'm starting to learn JavaScript and still don't know how to fix. Here's my code:
<!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>Answer Something</title>
<script>
$.getJSON('question.json', function(data){
console.log(data)
let questionList = data[Math.floor(Math.random()* data.length)];
let display = document.getElementById('question');
display.innerHTML = questionList;
});
</script>
</head>
<body>
<nav>
Quick Ask
Quick Answers
</nav>
<h1 id="question"></h1>
<div>
<button>Sai/Không/Trái</button>
<button>Đúng/Có/Phải</button>
</div><br>
<div>
<button>Kết quả vote</button>
<button>Câu hỏi khác</button>
</div>
</body>
</html>
I am trying to show picture after choosing it from html form following this code:
http://jsfiddle.net/LvsYc/
and my code is:
<!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, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="bootstrap/favicon.ico">
<title>Image Test</title>
<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/jquery.min.js"></script>
<link href="bootstrap/signin.css" rel="stylesheet">
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
</script>
</head>
<body>
<div class="container">
<form id="form12" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
But the chosen image is not shown. What am I doing wrong? It looks almost like the example above.