Trying to click the magic8, but the happy, sad and surprised pictures won't show below the line. What did I do wrong? I have saved the images in random.js in the same folder.
<html>
<head>
<script type=text/javascript src="random.js">
</script>
<script>
function magicEight() {
var imgName;
imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]);
document.getElementById('outputDiv').value = imgName;
}
</script>
</head>
<body>
<div style="text-align:center">
<h1> Magic 8-ball (Mattel, Inc.) </h1>
<p> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. </p>
<input type="text" id="questionBox" size=90 value="">
<p>
<input type="image" src="http://balance3e.com/Images/8ball.gif" id="button" onclick="magicEight();">
</p>
<hr>
<div id="outputDiv"></div>
</div>
</body>
</html>
If you want to show and image you need to add the value of the randomoneof on a img tag not on a div tag. Change that and I think it will work
Demo: https://codepen.io/hienhuynhtm/pen/dpLgNr
<script>
var IMAGE_LIST = [
"http://balance3e.com/Images/happy.gif",
"http://balance3e.com/Images/sad.gif",
"http://balance3e.com/Images/surprised.gif"
];
function magicEight() {
var imgName = IMAGE_LIST[Math.floor(Math.random() * IMAGE_LIST.length)];
document.getElementById("randomImg").src = imgName;
}
</script>
<div style="text-align:center">
<h1> Magic 8-ball (Mattel, Inc.) </h1>
<p> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. </p>
<input type="text" id="questionBox" size=90 value="">
<p><input type="image" src="http://balance3e.com/Images/8ball.gif" id="button" onclick="magicEight();"></p>
<hr />
<img id="randomImg" />
</div>
Setting .value on outputDiv will not display images. You have to set the src attribute of an <img> tag.
Assuming all of the random images live in /Images, you could use the below as your new magicEight function.
function magicEight() {
var imgName;
imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]);
var imageTag = "<img src='/Images/" + imgName + "'>";
document.getElementById('outputDiv').innerHTML= imageTag;
}
Related
<!DOCTYPE html>
<html>
<head>
<title>WhiteList</title>
</head>
<body>
<h1>Hello stranger lets see if you are on the list!!</h1>
<input id="1" value="type here" placeholder="type here">
<button onclick="click()">Check</button>
<br>
<p id=stuff></p>
<script type="text/javascript">
function click(){
var name = document.getElementById('1').value;
if (name == "tijmen"){
document.getElementById("stuff").innerHTML = "<p>hey you are on the list welcome</p>"
} else{
document.getElementById("stuff").innerHTML = "<p>sorry you are not on the list</p>"
}
}
</script>
</body>
</html>
so this is the code, there are no errors. but the problem is that the text won't print when i insert my name and click the button.... i realy cant seem to find the problem.
Try add onclick to the JavaScript:
<body>
<h1>Hello stranger lets see if you are on the list!!</h1>
<input id="1" value="type here" placeholder="type here">
<button id="btn">Check</button>
<br>
<p id=stuff></p>
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
var name = document.getElementById('1').value;
if (name === "tijmen"){
document.getElementById("stuff").innerHTML = "<p>hey you are on the list welcome</p>"
} else {
document.getElementById("stuff").innerHTML = "<p>sorry you are not on the list</p>"
}
}
</script>
</body>
Problem here is click is defined as a click action so the engine is thinking you are calling the click of the button. Simple test shows what the browser sees.
<button onclick="console.log(click)">Check</button>
What can you do? Change the name, or even better, use addEventListener to bind the event listener.
It is perfectly working. I want to get the current URL and set it inside textarea or input tag. Actually the value is set into a p tag.
function urlf() {
document.getElementById("root").innerHTML = "The full URL of this page is: < br > " + window.location.href;
}
<h2>JavaScript</h2>
<h3>The window.location.href</h3>
<button id="my btn" type="button" onclick="urlf()">
get
</button>
<p id="root"> </p>
How can I do this?
Create an input tag and set its value
function urlf() {
document.getElementById("root").value = "The full URL of this page is:" + window.location.href;
}
<h2>JavaScript</h2>
<h3>The window.location.href</h3>
<button id="my btn" type="button" onclick="urlf()">
get
</button>
<input type="text" style="width:100%;" id="root">
you set the innerHTML of the element with the id root. According to your code this is:
<p id="root"> </p>
so if you want to load the content into an input field you need to change the following:
document.getElementById("root").value = "The full URL of this page is:" + window.location.href;
<input id="root" type="text" />
greetings
<input id="root" type="text">
function urlf() {
document.getElementById("root").value = window.location.href;
}
You just want the current URL in a input? Like below:
function urlf() {
document.getElementById("root").value = "The full URL of this page is:" + window.location.href; }
<div>
<h2>JavaScript</h2>
<h3>The window.location.href</h3>
<button id="my btn" type="button" onclick="urlf()">
get
</button>
<input style="width:500px;" type="text" id="root"/>
</div>
I haven't got much experience in javascript. But I got a little slider and a lightbox, whose content should change when a specific radio is selected. So for example when the radio with id="id2" is selected, the content of the lightbox
<div class="modal">
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<img src="img/blabla.JPG">
<p>blablabla</p>
</div>
</div>
should be "blabla" and the source of the image "img/blabla.jpg".
But now when I select the 2nd radio with id="id3", the content should be "blopblop" and the source of the image "img/blopblop.jpg"...
Is that possible?
I already got a code on my website, which changes the href of a link when a specific radio is selected:
function myFunction() {
if(document.getElementById('id2').checked) {
document.getElementById('myLink').href = "infografik.html";
}
But I don't know how I should do it with "p" and "img"...
Thanks for your help!
You could use data attributes on the radio buttons like so:
<form>
<input type="radio" class="changemodal" data-src="/my/img/1.jpg" data-p="Foo!">
<input type="radio" class="changemodal" data-src="/my/img/2.jpg" data-p="Bar!">
</form>
<div class="modal">
<img id="modal_img" src="">
<p id="modal_p"></p>
</div>
You can then use attributes these in jQuery:
$('.changemodal').click(function(){
$('#modal_img').attr('src', $(this).attr('data-src'));
$('#modal_p').html($(this).attr('data-p'));
});
So I have created a working solution. You can change it to what you desire.
Working solution !
var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
rad[i].onclick = function() {
document.getElementById('modal_p').innerHTML = this.value;
document.getElementById("imgSrc").src = "img/" + this.value + ".JPG";
document.getElementById('imgSrcP').innerHTML = "img/" + this.value + ".JPG";
};
}
<form name="myForm">
<input type="radio" name="myRadios" value="blabla" />Blabla
<input type="radio" name="myRadios" value="blopblop" /> Blopblop
</form>
<div class="modal">
<img id="imgSrc" src="img/blabla.JPG" />
<p id="imgSrcP"></p>
<p id="modal_p"></p>
</div>
Something like this..
$('.modal img').attr('src','blopblop.jpg');
$('.modal p').text('blopblop');
You can use $(selector).attr('src', 'image source') to dynamically change the image source and $(selector).text('new_text') to dynamically change the content of paragraph p.
The following code gives 3 radio buttons to do the required changes.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#id2").on("change", function() {
if (document.getElementById("id2").checked) { // This confirms if the radio button is selected or not
// change
$('.modal img').attr('src', 'img/blabla.jpg'); // change image source
$('.modal p').text('blabla'); // change paragraph content
}
});
// Similarly for id3
$("#id3").on("change", function() {
if (document.getElementById("id3").checked) {
// change image and paragraph
$('.modal img').attr('src', 'img/blopblop.jpg');
$('.modal p').text('blopblop');
}
});
// For id1 - returning back to default state
$("#id1").on("change", function() {
if (document.getElementById("id1").checked) {
// change image and paragraph
$('.modal img').attr('src', 'img/blablabla.jpg');
$('.modal p').text('blablabla');
}
});
});
</script>
</head>
<body>
<form action="">
<input type="radio" name="truth" id="id2" value="0">BlaBla
<input type="radio" name="truth" id="id3" value="1">BlopBlop
<input type="radio" name="truth" id="id1" value="2">BlaBlaBla
</form>
<div class="modal">
<div class="modal__inner">
<label class="modal__close" for="modal-1"></label>
<img src="img/blablabla.jpg">
<p>blablabla</p>
</div>
</div>
</body>
</html>
I was trying to find and answer to my question but I've found none.
I expect the solution to be simple, I just think I'm making some syntax errors.
What I want to achieve: I want to add a new "<dd>" element to my "<dl>" through a JavaScript.
The <dd> element would have an <a> element inside, like:
"<dd><a href =...></a></dd>"
The link to would need to be taken from a form.
Here's the code. I don't really know how to finish it - just starting with JavaScript.
<dl id="dl">
<dt>Menu</dt>
<dd>Home</dd>
<dd>Galeria</dd>
<dd>Canvas</dd>
<dd>Ankieta</dd>
<dd>JQuery</dd>
<dd>Mobilne</dd>
</dl>
<form method="post" id="formularz" onsubmit="myFunction3()">
<p><input type="text" name="link" id="link" value="Tutaj wpisz swój link"></p>
<p><input type="text" name="tytul" id="tytul" value="Tytuł linku"</p>
<p><input type="submit" name="submit" id="submit" value="Potwierdź"></p>
</form>
<script>
function myfunction3(){
var link = document.getElementById("link");
var tytul = document.getElementById("tytul");
var dd = document.createElement("dd");
var dl = document.getElementById("dl");
var a = document.createElement("a");
a.href = link;
a.text = tytul;
dd.add(a);
dl.add(dd);
}
</script>
Thanks for help in advance!
I've editted my script.
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<dl id="dl">
<dt>Menu</dt>
<dd>Home
</dd>
<dd>Galeria
</dd>
<dd>Canvas
</dd>
<dd>Ankieta
</dd>
<dd>JQuery
</dd>
<dd>Mobilne
</dd>
</dl>
<form id="formularz">
<input type="text" name="link" id="link" value="Tutaj wpisz swój link" />
<br/>
<input type="text" name="tytul" id="tytul" value="Tytuł linku" />
<br/>
<button name='submit'>Potwierdź</button>
<br/>
</form>
<script>
function $(sel) {
return document.querySelector(sel);
}
$('#formularz').addEventListener('submit', function (e) {
e.preventDefault();
var link = $('#link'),
tytul = $('#tytul'),
el = document.createElement('dd');
el.innerHTML = '' + tytul.value + '';
$('#dl').appendChild(el);
});
</script>
</body>
</html>
This page adds a link at the end of #dl when the form is submitted.
Also, you may want to take a look at this great free book on Javascript to help you with some of the basics: Eloquent Javascript.
<script>
function myfunction3(){
var link = document.getElementById("link");
var tytul = document.getElementById("tytul");
document.getElementById("dl").innerHTML = '<dt>Menu</dt>\
<dd>Home</dd>\
<dd>Galeria</dd>\
<dd>Canvas</dd>\
<dd>Ankieta</dd>\
<dd>JQuery</dd>\
<dd>Mobilne</dd>\
<dd>NEW ELEMENT HERE, where tytul (title)</dd>';
}
</script>
Here is my code:
HTML
<form>
<img id='image' src=""/>
<input type='text' id='text'>
<input type="button" value="change picture" onclick="changeimage()">
</form>
JavaScript
function changeimage() {
var a=document.getElementById('text').value
var c=a+".gif"
c="\""+c+"\""
var b= "<img src="+c+"\/>"
document.getElementById('image').innerHTML=b
}
I have some GIF images. I want to write an image name in the textbox and then have the image become shown when the button is clicked. However, it's not happening. Why?
You should do this:
document.getElementById('image').src = c;
By doing document.getElementById('image').innerHTML=b you are trying to defined the HTML inside the <img> tag which is not possible.
Full script:
function changeimage() {
var a = document.getElementById('text').value;
var c = a + ".gif";
document.getElementById('image').src = c;
}
Try this instead:
<html>
<body>
<script type="text/javascript">
function changeimage() {
var a = document.getElementById('text').value;
document.getElementById('image').src = a + '.gif';
}
</script>
<form>
<img id='image' src=""/>
<input type='text' id='text'>
<input type="button" value="change picture" onclick="changeimage()">
</form>
</body>
</html>
document.getElementById("image").setAttribute("src","another.gif")
In order to update the <img> tag you need to update it's source, not it's inner HTML.
function changeimage()
{
var a=document.getElementById('text').value
var c=a+".gif"
c="\""+c+"\""
var elem = document.getElementById('image');
elem.setAttribute('src', c);
}