Check input value with javascript and show image - javascript

I'm sorry, i'm very new to develop code. Now I'm doing some homework and want to do something outside of the textbook, but I'm failing ... :)
I created some simple html. Example:
<tr>
<td id="som1">5 + 3 =
<input id="a_som1" type="number" required>
</td>
<td>
<img src="goed.png" alt="goed" title="goed" id="i-s1g">
<img src="fout.png" alt="fout" title="fout" id="i-s1f">
</td>
And it ends with a button:
What I want is when you click on this button, the script checks your answer and either shows the "goed" or the "fout" image.
I hided the images with a css-stylesheet and this code:
img {
width: 35px;
display: none;
}
I tried the following as javascript, however, it doesn't work. (I know this code is probably very stupid, I just tried some things when searching the internet.) I hope someone can help me :):
Oh, and is it necessary to use $(document).ready(function() { . It was in my textbook, but I don't really know if it's necessary...
$(document).ready(function() {
$("#cont").click {
if ($("#a_som1").val() 8 ) {
show("#i-s1g")
}
else {
show("#i-s1f")
}
}
}
Thanks for helping!!

getting all the things i need 1:input 2:gIMAGE 3:fIMAGE & saving them in three variables..
putting eventListener on input of keypress then checking if the is enter,if is enter check if the number is equal to my answer("8").if yes show gimage and hide fimage,
if not hide gimage and show fimage
let input = document.getElementById("a_som1");
let gImg = document.getElementById("i-s1g");
let fImg = document.getElementById("i-s1f");
input.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
if (input.value == 8) {
gImg.style.display = "block"
fImg.style.display = "none"
} else {
fImg.style.display = "block"
gImg.style.display = "none"
}
}
});
img {
width: 35px;
display: none;
}
<tr>
<td id="som1">5 + 3 =
<input id="a_som1" type="number" required>
</td>
<td>
<img src="goed.png" alt="goed" title="goed" id="i-s1g">
<img src="fout.png" alt="fout" title="fout" id="i-s1f">
</td>
</tr>

Related

add OnClick event on a div

I'm trying to add an event of a button that is in a div.
HTML :
<template id="modele-panier" type="text/AhuntsicModele">
<div class="dialog-item">
<table>
<tr>
<td>
<img src={cheminImage} alt="">
</td>
<td>
<h2>Article : {libelleProduit}</h2>
<p>Qte : {qteProduit} prix : {prixProduit}$</p>
</td>
<div class="supp">
<td>
Supprimer
</td>
</div>
</tr>
</table>
</div>
</template>
Controler.js
document.addEventListener('click', function (e) {
if (e.target && e.target.matches('button')) {
controleur.ajouterPanier(e.target.id);
} else if (e.target && e.target.matches('#main')) {
controleur.loadCatalogue();
} else if (e.target && e.target.matches('#getBMW')) {
controleur.loadBMW();
} else if (e.target && e.target.matches('#getAudi')) {
controleur.loadAudi();
} else if (e.target && e.target.matches('#getMercedes')) {
controleur.loadMercedes();
} else if (e.target && e.target.matches('#icone_compte')) {
controleur.creationCompte();
} // THIS EVENT RIGHT HERE :
else if (event.target.matches('supp')) {
alert(e.target.id)
controleur.supprimerItem();
}
});
Im not able to add the event to the div class supp all the other are working fine since im not using a div class for the other ones.
Thanks
you could use this
const div = document.getElementsByClassName("supp");
else if (div[0]!=undefined) {
alert(e.target.id)
controleur.supprimerItem();
}
hope it helps
If I understand correctly, you'd like your controller logic to detect and process click events on the element with the supp class.
To achieve that with minimal changes to your code, you could do the following via the classList interface:
document.addEventListener('click', function(e) {
/* Existing code removed for bervity */
/* Use classList.contains method to check if target element has supp class */
if (event.target.classList.contains('supp')) {
alert(e.target.id)
controleur.supprimerItem();
}
});
<table>
<tr>
<td><img src="https://via.placeholder.com/150" alt=""></td>
<td>
<h2>Article : {libelleProduit}</h2>
<p>Qte : {qteProduit} prix : {prixProduit}$</p>
</td>
<div class="supp">
<td>Supprimer </td>
</div>
</tr>
</table>
I'm assuming that the click handler is targeting elements that are dynamically added to the DOM (which is why you're running the if/else if check inside of the click handler?) - another approach to this logic that might give you a bit more flexibility would be to query the DOM via a CSS-like selector and the querySelector() method:
document.addEventListener('click', function(e) {
/* Existing code removed for bervity */
/* Query document during click for first .supp relative to table */
const suppDiv = document.querySelector("table .supp")
if(suppDiv) {
alert('clicked .supp')
}
});
<table>
<tr>
<td><img src="https://via.placeholder.com/150" alt=""></td>
<td>
<h2>Article : {libelleProduit}</h2>
<p>Qte : {qteProduit} prix : {prixProduit}$</p>
</td>
<div class="supp">
<td>Supprimer </td>
</div>
</tr>
</table>
Hope that helps!
You are trying to use a function parameter event, which isn't called in your function. You named the parameter e in your function.
Also, .matches() checks if an element would normally be targeted based on a selector string. Which is what you would normally use to target elements with document.querySelector(). So supp should be changed to .supp.
So your code should work when you change it to:
} else if (e.target.matches('.supp')) {
controleur.supprimerItem();
}
Or even:
} else if (e.target && e.target.matches('.supp')) {
controleur.supprimerItem();
}
Like the rest of your if-statements.
Here is a snippet to show that this code should work as intended:
document.addEventListener("click", function (e) {
if (e.target && e.target.matches(".supp")) {
alert("It works");
}
});
.supp {
width: 100px;
height: 100px;
background-color: blue;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
<div class="supp">Click me</div>

javascript expand/collapse text - collapse on default

I'm very inexperienced in javascript but have managed (with the help of google) to put together the following expandable/collapsible link
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
}
</script>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
The only problem with it is that it is expanded by default and I wanted it collapsed by default. Can anyone help with this? Thank you!
Also, if anyone knows how to get +/- signs next to the link that change depending on whether it is expanded or collapsed, that would be great.
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
var toggleIcon = document.getElementById('toggle-icon');
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block";
toggleIcon.innerHTML = '-';
}
else {
e.style.display = "none";
toggleIcon.innerHTML = '+';
}
return true;
}
</script>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
<span id="toggle-icon">+</span>
</p>
<p id="para1" style="display: none;">
<strong><em>text text text text</em></strong>
</p>
You can try putting in style statement the display option like below:
<p id="para1" style="display:none"><strong><em>text text text text</em></strong></p>
That can default collapse when you open your html, hope it help you...
Options 1:
Add this to your css to hide it by default:
#para1 {
display: none;
}
Options 2:
Move your script down, and call it initially toggleMe('para1'); so you will hide it first.
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
}
toggleMe('para1');
</script>
Daniel has the correct answer to your question. This is a bit more than you asked for, but I think you will have a better time if you manipulate classes instead of element styles properties. Just makes it a bit more flexible.
In the example below I wrapped your code in a common element and then changed that element's class to achieve your desired effect. That let me easily add in your plus and minus too.
It's a little raw but you can see where this can take you. Hope it helps.
https://jsfiddle.net/6xoe1b94/
function toggleMe(a) {
var e = document.getElementById('wrapper');
if(! e.classList.contains('active')) {
e.classList.add('active');
}
else {
e.classList.remove('active');
}
}
#para1{
display:none;
}
.active #para1{
display:block;
}
#plus{
display:inline-block;
}
#minus{
display:none;
}
.active #plus{
display:none;
}
.active #minus{
display:inline-block;
}
<div id='wrapper'>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" /><span id='plus'>+</span><span id='minus'>-</span>
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
</div>
I added a solution that removes the javascript and css from your html. I also changed your expand/collapse element to a div instead of input. I've added a span element within the div that changes it's text content (either + or -) based on whether #para1 is displayed or not. Also, in css I added display: none; to #para1 (this initially hides the element), cursor: pointer; (shows it is clickable when the user hovers over it) user-select: none; (stop div from highlighting when user clicks on it).
// store elements
var expandEl = document.getElementById("expand");
var plusMinusEl = document.getElementById("plusMinus");
var para1El = document.getElementById("para1");
// toggle function: pass element as argument
function toggleMe(el) {
// check if element is hidden
if(el.offsetParent === null) {
plusMinusEl.textContent = "-";
el.style.display = "block"
}
else {
plusMinusEl.textContent = "+";
el.style.display = "none"
}
}
// click function for expand div
expandEl.addEventListener("click", function() {toggleMe(para1El)});
#expand {
font-size:18px;
color:#008080;
cursor: pointer;
user-select: none; /* stop div from highlighting */
}
#para1 {
display: none;
}
<div id="expand">
LINK TO EXPAND <span id="plusMinus">+</span>
</div>
<p id="para1"><strong><em>text text text text</em></strong></p>

Dynamic text changes position of span

I have a span which has a predefined value which is initiated on page load.
The user can alter the values by interacting with an input field.
My problem is that all the spans are in a table, and whenever the number is altered
instead of appearing in the exact same spot as the predefined number, it positions itself up like 20px or so.
Any help will be appreciated.
HTML
<table class="tbl1">
<tr>
<td style="overflow: hidden; width: 280px; text-align: left; valign: top"><span class="Cs boxGreen">A</span>
</td>
<td width="18%"><span class="number1Output"></span>
</td>
</tr>
</table>
JS
var currency = "£";
(function ($) {
$(window).load(function () {
$('.number1Output').html($('#number1').val());
});
});
function displayNumber(value, id, id2) {
var output = '.' + id + "Output";
if (value == 0) {
$(output).html('');
$(id2).html("free");
} else {
$(output).html('+' + value + currency + ' ');
$(id2).html(value + currency);
}
}
If you are changing the width of a span/field/window/etc. and the positioning does not look right you might want to use CSS. min-width can help with this.

How do I get div not to display if value in another div is empty in Javascript?

Here is my code. I have tried everything I can think of. I have tried using just div ID's and have now tried classes. Nothing seems to work. I just want the number 2 not to be visible if there is no entry beside it. It doesn't matter if it is in a table or not.
Thanks.
<style type="text/css">
<!--
.leftone {
float: left;
height: auto;
width: auto;
}
.rightone {
float: left;
height: auto;
width: auto;
}
.lefttwo {
float: left;
height: auto;
width: auto;
}
.righttwo {
float: left;
height: auto;
width: auto;
}
-->
</style>
<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE">
<tr>
<td width="200" height="50"><div class="leftone">1.)</div></td>
<td width="200" height="50"><div class="rightone">The Number One</div></td>
</tr>
<tr>
<td width="200" height="50"><div class="lefttwo">2.)</div></td>
<td width="200" height="50"><div class="righttwo"></div></td>
</tr>
</table>
<p> </p>
<script type="text/javascript">
<!--
function shownumbers() {
var myNum1 = '[.rightone]';
if(myNum1 != ''){
document.getElementById('.leftone').style.display = "block";
}
else if(myNum1 == ''){
document.getElementById('.leftone').style.display = "none";
}
var myNum2 = '[.righttwo]';
if(myNum2 != ''){
document.getElementById('.lefttwo').style.display = "block";
}
else if(myNum2 == ''){
document.getElementById('.lefttwo').style.display = "none";
}
}
//-->
</script>
You cannot use getElementById with classes. Also, you don't need the '.' or '#' when using these methods in javascript. Below should do what you are asking. Although if there is only ever 1 item of class 'rightone' and 'leftone' you should use ID's.
var myNum1 = document.getElementsByClassName('rightone')[0].innerHTML;
if(myNum1 != ''){
document.getElementsByClassName('leftone')[0].style.display = 'block';
} else if(myNum1 == ''){
document.getElementsByClassName('leftone')[0].style.display = 'none';
}
A more elegant solution would be:
HTML:
<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE">
<tr>
<td><div class="left">1.)</div></td>
<td><div class="right">The Number One</div></td>
</tr>
<tr>
<td><div class="left">2.)</div></td>
<td><div class="right"></div></td>
</tr>
</table>
JS:
var right = document.getElementsByClassName('right');
for(var i=0;i<right.length;i++){
if(!right[i].innerHTML){
right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'none';
} else {
right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'right';
}
}
Kinda similar to Jason's, but I spent the time so I'mma post it. ;)
JSFiddle: http://jsfiddle.net/H3UNH/1/
HTML:
<table id="tableONE">
<tr>
<td width=50>1.)</td>
<td >The Number One</td>
</tr>
<tr>
<td>2.)</td>
<td></td>
</tr>
</table>
(I do still like the width attribute for cells in tables; it can be moved to CSS but this is one of those exceptions for me where the markup and presentation can have a tiny bit of overlap. Move everything else to CSS. Your mileage may vary.)
CSS:
td { padding: 3px; text-align:left; height: 50px;}
JavaScript:
function shownumbers() {
var rows = document.getElementsByTagName('tr');
for(var i=0,len=rows.length;i<len;i++) {
var _this = rows[i];
var rowCells = _this.getElementsByTagName('td');
if(rowCells[1].innerHTML == "") {
_this.style.display = "none";
}
}
}
shownumbers();
(for the purpose of the demo, I just separately call shownumbers. If you want it to be automatic, make it self-invoking. Otherwise call it from wherever it makes sense)
I think the more important lesson here isn't the JavaScript, actually. ;) I understand that not everyone is writing perfect JavaScript (heck, mine's not perfect either). But you really need to understand the purpose of CSS and classes in general to write good maintainable markup and presentation for the web! I hope that doesn't sound too condescending or anything; it wasn't meant to be.
By using the :empty selector.
var els = document.querySelectorAll('td div:empty'),
i = els.length,
el;
for(;i--; ) {
el = els[i];
do {
el = el.parentNode;
} while ( el.nodeName != 'TR' )
el.style.display = 'none';
}
Fiddle: http://jsfiddle.net/uAUt8/

Hidden Object But Still Have a Place Reserved

I'm trying to make two forms that aren't displayed at the same time. The first one stays visible when the page opens, but if the user select, the first one should be hidden and the second one might take it's place. So here is my CSS for this:
#switcher {
float: right;
font-size: 12px;
}
#web_upload {
visibility: hidden;
}
#local_upload {
visibility: visible;
}
Here is the HTML:
<form action="img_upload.php" id="local_upload" method="post" enctype="multipart/form-data">
<center>
<input type="file" name="file" id="file" />
<br />
<input type="image" name="submit" src="graphics/upload.png" />
</center>
</form>
<form action="url_upload.php" id="web_upload" method="post" method="post">
<center>
<input type="text" name="url" id="url" />
<br />
<input type="image" name="submit" src="graphics/upload.png" />
</center>
</form>
And here is my Javascript to do it:
function showHide(id, other)
{
if(document.getElementById(id)) {
if(document.getElementById(id).style.visibility != "hidden") {
document.getElementById(other).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";
} else {
document.getElementById(id).style.visibility = "hidden";
document.getElementById(other).style.visibility = "visible";
}
}
}
So, I'm having three problems:
The second form has a reserved place on the page and I don't want this empty place
The second form is displaying on that reserved place instead of taking place over the first one
If the user select one of the options and try to select other after nothing happens
How I can solve this problems?
#Nathan Campos: I'd combine display and visibility like so --
CSS:
#web_upload {
display: none;
visibility: hidden;
}
#local_upload {
display: inline;
visibility: visible;
}
JavaScript:
function showHide(id, other)
{
var id1 = document.getElementById(id);
var id2 = document.getElementById(other);
if (id1.style.display == "none") {
id1.style.display = "inline";
id1.style.visibility = "visible";
id2.style.display = "none";
id2.style.visibility = "hidden";
} else if (id1.style.display == "" || id1.style.display == "inline") {
id1.style.display = "none";
id1.style.visibility = "hidden";
id2.style.display = "inline";
id2.style.visibility = "visible";
}
}
display: none/block; Show the form / Totally hide and clear the space
visibility: hidden; Hide the form, but keep the space preserved
The CSS visibility property is not the right choice here.
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether)
Reference: http://www.w3.org/TR/CSS21/visufx.html#visibility
Consider instead the CSS display property - display:none applied to an element will make it appear as if it is not present at all, it will be invisible and will not affect layout.
#switcher {
float: right;
font-size: 12px;
}
#web_upload {
display:none;
}
#local_upload {
display:block;
}
//
function showHide(id, other)
{
switch (document.getElementById(id).style.display) {
case 'block':
document.getElementById(id).style.display = 'none';
document.getElementById(other).style.display = 'block';
case 'none':
document.getElementById(id).style.display = 'block';
document.getElementById(other).style.display = 'none';
}
}

Categories

Resources