How to remove an attribute from an HTML element - javascript

<ol>
<li id="ItsMyKitchen">It's My Kitchen</li>
<div id="mykitchen" hidden>
<img src="images/image1.jpg" height="200px" width="200px"/>
<ul>
<li>Pizza</li>
<li>Camorised Oinon rice</li>
<li>Jollof</li>
<li>Banku with Okor</li>
<li>Fufu</li>
<li>Spanish Omellet</li>
<li>Fried Rice with Beef</li>
<li>Steamed Rice with Curry Chicken</li>
<li>Yong Chow Fried Rice </li>
</ul>
</div>
i want to remove the "hidden" attribute from the div element that has "mykitchen" as the id. Am using this javascript code
var ItsMyKitchen1 = document.getElementById("ItsMyKitchen");
ItsMyKitchen1.onclick = function(){
document.getElementById("myKitchen").removeAttribute("hidden");
}
but it seems not to be working. any help

You've created your div with id mykitchen, but when you try to get the element by id, you're trying to select a div with id myKitchen. Try making those two match, and then your code should work as expected.
Your use of element.removeAttribute is correct, but capitalization matters for element ids!

You can try this way.
document.getElementById("mykitchen").addEventListener("load", myFunction);
function myFunction() {
document.getElementById("mykitchen").removeAttribute("hidden");
}

Related

can I make image get focus using className

I want to focus on image link by javascript, the problem is that I don't have direct access to my image.
<li classe="product-1">
<div classe="shop">
<a class="img-link" src="xxxxxx">
<img class="image1">
</a>
</div>
</li>
i tried using access to give focus to the image but doesn't work
var imaglink = document.getElementsByClassName("product-1")[0].getElementsByClassName("shop")[0].getElementsByClassName("img-link")[0];
imagelink.focus();
if anyone have any suggestion ho to resolve this probleme i will be thankful
Possible typo, depending on language I think... I notice in your code you have some lines with classe="..." other times class="..."
with your li element have classe, that might be returning an undefined value, so the rest of your selection isn't going to work.
const img = document.querySelector("li a > img")
img.focus()
or
const img = document.querySelector(".shop > a img")
or if there multiple images
const img = document.querySelectorAll(".product-1 img")[0]
You can just combine the selectors together and use querySelector like
document.querySelector(".product-1 .shop .img-link").focus();
document.querySelector(".product-1 .shop .img-link").focus();
a:focus{
display:inline-block;
border:20px solid #ccc;
}
<li class="product-1">
<div class="shop">
<a href class="img-link">
<img class="image1" src="https://picsum.photos/200/300">
</a>
</div>
</li>

How can I use jQuery to make an element's content the same as another?

I have a site with a drop-down menu and I want the titles in it to be the same as the content in an h1 tag on another part of my site
This is my jQuery -
const johnName = $("#john").siblings("span");
const johnNameMenu = $(".john").children("h1").val();
johnName.html(johnNameMenu);
This is the code on my site which I want to appear in the menu -
<section class="john">
<div class="team-header" id="john">
<div class="teamlogo">
<img src="images/logos/lazio.png" />
<h1>John's Team</h1>
</div>
</div>
<div class="john-roster team-rosters">
<?php include ('john.php'); ?>
</div>
</section>
This is the code in the dropdown menu -
<a href="#john" id="john-link" class="anchor">
<span></span></a>
I want the "John's Team" to appear in the drop-down menu.
What is wrong with my jQuery code?
For getting the text of an element you use the function text(); val() is for <input> elements.
Note: even though I left the HTML as-is, id should be unique in a page. You should be using class if you want to have multiple of those <a> tags in there.
Your selectors and use of .children were not right. If you still want to use .children the line would be $('.john').children().find('span').
I'd recommend using more specific selectors than using .john (children far down in hierarchy).
const johnName = $(".john span");
const johnNameMenu = $(".john h1").text();
console.log(johnNameMenu)
johnName.each(function(){
$(this).html(johnNameMenu);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is the code on my site which I want to appear in the menu -
<section class="john">
<div class="team-header" id="john">
<div class="teamlogo">
<img src="images/logos/lazio.png" />
<h1>John's Team</h1>
</div>
</div>
<div class="john-roster team-rosters">
<a href="#john" id="john-link" class="anchor">
<span></span></a>
<a href="#john" id="john-link" class="anchor">
<span></span></a>
</div>
</section>
try this
const johnName = $("#john").closest("selection").find("span");
const johnNameMenu = $(".john").children("h1").val();
johnName.html(johnNameMenu);

Can't append Button element to li parent

I'm trying to append a button into a li item with the .appendChild method, but it doesn't work. I also tried altering the parent's inner HTML.
let inputElement = document.querySelector('#input');
let listItem = document.createElement('li');
listItem.className = 'todo-item'
let checkButton = document.createElement('button');
checkButton.className = 'checkButton'
//? When adding the child element, it is only added after the text content is defined.
listItem.appendChild(checkButton);
listItem.textContent = inputElement.value;
<div class="app">
<div class="list">
<h1> My Todo List </h1>
<ul class="todo-list" id="list">
<div class="list-row">
<li class="todo-item"><button class="checkButton"></button> Test Item </li>
</div>
<div class="list-row">
<li class="todo-item"><button class="checkButton"></button> Test Item </li>
</div>
</ul>
<input id="input" class="list-input" type="text" placeholder="Next I need to...">
</div>
</div>
Here's the current result
If I modify the order in which the child is appended, the button DOES show up but it's not the best result
//? When adding the child element, it is only added after the text content is defined.
listItem.textContent = inputElement.value;
listItem.appendChild(checkButton);
Setting the textContent property will reset the whole li element, thus removes the previously added button, try with insertAdjacentHTML().
The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element.
let inputElement = document.querySelector('#input');
let listItem = document.createElement('li');
listItem.className = 'todo-item'
let checkButton = document.createElement('button');
checkButton.className = 'checkButton'
listItem.appendChild(checkButton);
listItem.insertAdjacentHTML('beforeend',inputElement.value);
document.querySelector('#list').appendChild(listItem);
<div class="app">
<div class="list">
<h1> My Todo List </h1>
<ul class="todo-list" id="list">
<div class="list-row">
<li class="todo-item"><button class="checkButton"></button> Test Item </li>
</div>
<div class="list-row">
<li class="todo-item"><button class="checkButton"></button> Test Item </li>
</div>
</ul>
<input id="input" class="list-input" type="text" placeholder="Next I need to...">
</div>
</div>
First do not be so greedy with the ";" signs ;)
This happens cause the whole thing is wrong :)
Look, This would and will work perfectly in plain html:
<ul>
<li><input type="radio" name="gender" value="male"> Male</li>
<li><input type="radio" name="gender" value="female"> Female</li>
<li><input type="radio" name="gender" value="other"> Other </li>
....
</ul>
And now we do exactly the same in Javascript.
var ipb=document.createElement("INPUT") //Not button ! Forget that this
// button tag
// even exists
ipb.setAttribute("id","ibp_0"); //always a good idea
ipb.setAttribute("name","gender"); //if its inside a form you want to use
//and a must have for radio buttons *)'
ipb.setAttribute("type","radio");// or checkbutton or input - what you
// want for a input type
ipb.setAttribute("value","male");
var txt = document.createTextNode("Male");
ipb.appendChild(txt);
// and now you can
LIST.appendChild(ipb); //the formaly created <UL> Node for sure
As you can see its the same thing like writing the html version just in a different syntax. There is no magic thing in behind which will do something for you.
The text node is not a perfect idea. I would use a label for that. Or a additional Label.
A label has a "FOR" attribute which i really suggest to use if you go that way.
But this typing i let up to ou :) Have fun !
*) radio buttons. They know that they belong together by the name.
You've created the element, for listItem but you've never actually added it to the DOM.
You need to append or insert the listItem before you try to add the checkbox.

Attribute and Variable (Simple)

I'm trying to use a VARIABLE as a ATTRIBUTE value...
I have :
var text = "Hello!";
and the HTML is :
<li class="pro" id="text"> ---> (I want the attribute ID to equals the TEXT variable)
How can I make this work?
Thank you
EDIT
I will be more specific in my question.
Here's what I really have :
<li class="product" name="RD-101" price="18" minimum="4" gap="4">
<a class="product-image fancybox" href="images/product_big.jpg" title="Picture 4">
<img src="images/product_2.png" alt="Preview"/>
<div class="text-overlay">
<p class="product-heading">Description</p>
Enseignes résidentielles imprimées sur 2 panneaux 4 mm 36” x 24” collés dos à dos.
</div>
</a>
<p class="product-heading">RD-101 (Simple)</p>
Ajouter au panier
<p class="product-meta">Double de pareterre 32x24</p>
<div class="product-price">18<span class="product-currency">$</span></div>
</li>
As you can see I use custom attributes that are set in my Javascript code.
I want to know how to set (for instance)...the PRICE attribute to a VARIABLE VALUE instead of the number "18" like it is right now in what I pasted up there.
I was thinking of something like -->
<li class="product" name="RD-101" price="MY_VARIABLE_HERE" minimum="4" gap="4">
Use $("li.pro").attr('id', text); with jQuery
Remember attribute name is not valid for a <li>
EDIT :
With no jQuery, this code add a price (not valid) attribute to all li elements
<ul id="my_ul_id">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
-
var text = 'Hello';
var arr_li = document.getElementById("my_ul_id").getElementsByTagName("li");
for(var i=0 ; i<arr_li.length ; i++)
{
arr_li[i].setAttribute('price', text);
}
Last thing, we said price wasn't a valid attribute.
If you want your HTML doc to be valid, have a look here
You could use the JQuery attr method:
var theName = 'yourMom';
$('li.pro').attr('name', theName);​
http://jsfiddle.net/J798a/2/
As you've specified "javascript" rather than "jquery", you could do something along the following...
<script type="text/javascript">
var text = "Hello!";
document.getElementById("liItem").setAttribute("id",text);
</script>
<ul>
<li class="pro" id="liItem">
</ul>
Updated to reflect change of attribute from "name" to "id"
$("li.pro").attr('name', text);
you can use any name for attribute, you like
Javascript would set it with
<script type="text/javascript">
var text = "Hello!";
document.getElementById("changeMe").setAttribute("id",text);
</script>
<ul>
<li id="changeMe">
</ul>
setAttribute sets the provided attribute (first argument) to the value of the second arguement... so element.setAttribute("name", "john smith") would set the name to "john smith" and element.setAttribute("class", "math") would set the class attribute to "math".
You can also do it with javascript templating libraries.
Some examples:
Handlebars
JavascriptMVC/CanJS
a ton of others
With JavascriptMVC, for example, an ejs file containing the following line (where text is actually a JS variable) will be transformed to html:
<li class="pro" id="<%= text %>">
You may read on this here:
http://javascriptmvc.com/docs.html#!jQuery.View
Welcome to the Fantastic Infinite Javascript Framework/libraries world :)!!

how to hide/remove all text in-between two elements?

lets say i have this lump of HTML:
<div class="container">
<span class="title">Heading 1</span>
This is a description..<br />
This is the second line..
<div class="image"><img src="image.jpg" /></div>
</div>
What i want to do using jQuery/JavaScript is hide/remove all text and elements between <span class="title"> and <div class="image">.
I've looked all over and found pretty much nothing. Any ideas on how i could do this?
How about something like this? http://jsfiddle.net/ZW8q2/1
var foo = $('.container').children(':not(br)');
$('.container').html('').html(foo);
You could try:
var str = $('.container .title').text() + $('.container .image').html();
$('.container').html(str);
JS Fiddle.
Try this:
Place a tag around what you want to hide, give div an ID name. So in the end your will look like:
<div id = "hideMe" style ="display:block">...Your Content...</div>
Use this javascript:
function hide()
{
document.getElementById('hideMe').style.display = "none";
return;
}
Have the Javascript function called whenever you want to hide the stuff between the div from a button (or other control) like this:
<input type= "submit" onclick ="hide()">

Categories