i need help getting this to work, tried everything google had to offer.. but still stuck. what i need it to do is load the value of (div id="availablecredits") to (div id="beta") on click. can any body help me out?
onclick="javascript:document.getElementById('beta').value=(javascript:document.getElementById('availablecredits').value)"
i also tried onclick="javascript:document.getElementById('beta').value=('#availablecredits')"
The property value is common for input elements like <input>, <select>, <textarea> and <button>
I think what you want is to copy a content of a <div> element to another div. If it's the case, use innerHTML instead of value.
Here is a snippet, just click on the gray area.
#div-two {
min-height: 20px;
background: #CCC;
}
<div id="div-one">
Hello this is #div-one
</div>
<div id="div-two" onclick="document.getElementById('div-two').innerHTML=document.getElementById('div-one').innerHTML"></div>
SNIPPET #2
You've defined a third <div> which you use as trigger but you can't click it if it's not visible, because it's height is 0. Specify some text inside it, then it's visible and the JS part work. Take a look at the snippet.
#getCredits {
background: #CCC;
}
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits" onclick="document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML">Click here to get available credits</div>
SNIPPET #3 - jQuery
$('#getCredits').click(function() {
$("#beta").html($('#availablecredits').html());
});;
#getCredits {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
Simple javascript function, change the ids in the function call to those of the elements in question.
<script>
function set_value( src,tgt ){
document.getElementById( tgt ).innerHTML=document.getElementById( src ).innerHTML;
}
</script>
<style>.p5{ display:block; padding:1rem; margin:1rem; border:1px solid black;}</style>
<div class='p5' id='src_div' onclick="set_value('src_div','tgt_div')">Weebles wobble but they don't fall down!</div>
<div class='p5' id='tgt_div'></div>
Or you can use a link to set the value
you should try to avoid writing inline event.try this:
<style>
#getCredits {
background: #CCC;
}
</style>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
<script>
document.getElementById('getCredits').addEventListener("click",function(){
document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML;
});
</script>
Why inline css and javascript are bad:http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/
The .val() method is sometimes useful:
var input = $("#Input").val();
Related
I have the following structure .. I would like to remove div.son but keepdiv.grandson, is that possible ?! or changing your <tag> would also be a solution .. ex: changing from <fieldset> to a <div>, remembering that I do not have access to HTML, every change must be done using ** javascript **!
<div class="father">
<fieldset class="son">
<div class="grandson">Content here</div>
<div class="grandson">Content here</div>
<div class="grandson">Content here</div>
<div class="grandson">Content here</div>
</fieldset>
</div>
I tried to use the removeChild () function of ** javascript **, but it removes the entire element.
It's possible with vanilla JavaScript by deep cloning the node of grandson before removing anything else. and then appending it back to the parent. Of course if you want to place it somewhere else, you need to append needed logic of DOM traversing. (CSS section is only for visual validation of the result)
const grandson = document.querySelector('.grandson');
const father = grandson.closest('.father');
const clonedGrandson = grandson.cloneNode(true);
father.querySelector('.son').remove();
father.appendChild(clonedGrandson);
.father {
background-color: red;
padding: 20px;
}
.son {
background-color: blue;
padding: 20px;
}
.grandson {
background-color: green;
padding: 20px;
}
<div class="father">
<fieldset class="son">
<div class="grandson">
<p>Save me</p>
</div>
</fieldset>
</div>
You may take a look at this answer, try to use the search bar next time.
https://stackoverflow.com/a/170056/10944905
In case you just want to jump all over the answer.
var cnt = $(".remove-just-this").contents();
$(".remove-just-this").replaceWith(cnt);
I've created a template part in PHP that copies a button to each slide in a carousel using fullpage.js. The template part has a hidden div that should open up navigation for each slide. Trying the code below, I can only get this button to work on the first slide. I'm thinking an iterated class name might help, but not sure why querySelectorAll wouldn't do it. Any advice appreciated...
http://www.pulsecreative-clients.com/staging/hogshead/#golf
const clickOnMe = document.querySelectorAll(".course-button");
let clickOnMe = document.querySelectorAll(".course-button");
Array.from(clickOnMe).forEach(el => {
el.addEventListener("click", e => {
let showBox = e.currentTarget.nextElementSibling;
showBox.classList.toggle("open-nav");
});
});
.subnav-content {
position: fixed;
bottom: 15%;
z-index: 1;
box-sizing: border-box;
padding: 10px;
background-color: #000;
display: none;
}
.golfcoursebutton {
box-sizing: content-box;
min-width: 30px;
height: 30px;
padding: 4px;
margin: 4px;
background-color: #fff;
color: #000;
text-align: center;
}
.open-nav {
display: block;
}
<div id="jump-button" class="jumpbuttons-container">
<div class="subnav">
<button class="course-button">
JUMP TO <i class="fa fa-angle-up"></i>
</button>
<div class="subnav-content">
<div style="display: flex;">
<div class="golfcoursebutton">1</div>
<div class="golfcoursebutton">2</div>
<div class="golfcoursebutton">3</div>
<div class="golfcoursebutton">4</div>
<div class="golfcoursebutton">5</div>
<div class="golfcoursebutton">6</div>
</div>
<div style="display: flex;">
<div class="golfcoursebutton">7</div>
<div class="golfcoursebutton">8</div>
<div class="golfcoursebutton">9</div>
<div class="golfcoursebutton">10</div>
<div class="golfcoursebutton">11</div>
<div class="golfcoursebutton">12</div>
</div>
<div style="display: flex;">
<div class="golfcoursebutton">13</div>
<div class="golfcoursebutton">14</div>
<div class="golfcoursebutton">15</div>
<div class="golfcoursebutton">16</div>
<div class="golfcoursebutton">17</div>
<div class="golfcoursebutton">18</div>
</div>
</div>
</div>
</div>
EDIT
UPDATED WITH SOLUTION
querySelectorAll does not returns an array, so it doesn't have a forEach. Luckily, you can easily create an array out of it with Array.from:
// change this
clickOnMe.forEach(...
// to this
Array.from(clickOnMe).forEach(...
You're selecting the first of the document
document.querySelector(".subnav-content");
when it should be the first of the element
e.querySelector(".subnav-content");
I've created a template part in PHP that copies a button to each slide in a carousel using fullpage.js.
Unfortunately, your code re-use is throwing an error. If we look at your source, we see:
div.jump-button
button.course-button
div.subnav-content
<script>
const clickOnMe = ...
</script>
This is repeated ~20 times.
The issue is that const can only be declared once. After that, JS will throw an error. In fact, if we view the console, we see just that:
Basically, after the first declaration of const clickOnMe, an error is thrown after. That's why only the first one works. I would look into moving (and consolidating) the <script> where you define clickOnMe to the bottom and invoke that once all the HTML is loaded.
Edit:
Regarding your comment, I see what you're referring to. You're now querying all the elements correctly by moving the event binding to the bottom (awesome!), but your event listener will need to be updated as well. The change is actually answered here (by #jeyko-caicedo) by referring to the event object when toggling the classList.
A more complete answer would be that you need to reference the event object (to reference the clicked element) and then query the sibling subnav-content. One way is what jeyko suggested (via closure of the forEach). The other is in the event handler with either: 1 walking up the DOM tree (using e.currentTarget.parentNode) or 2: just reference the element directly like e.currentTarget.nextElementSibling.
let clickOnMe = document.querySelectorAll(".course-button");
Array.from(clickOnMe).forEach(function(el) { // updated `e` to `el`
el.addEventListener("click", (e) => {
let showBox = e.currentTarget.nextElementSibling;
showBox.classList.toggle("open-nav");
});
});
querySelectorAll returns a NodeList. It's essentially just an Array of DOM Nodes, but it doesn't support all of the Array methods that you'd expect it to have. You'll have to cast it to an array first, or manually for loop over it instead of using forEach.
Suppose, as exercise, we have to dynamically adjust a div height to the one of the previous div.
My question is how to apply that on the "onload" of the element, in order to have each div's individul previous element...
Suppose the code
$(".description").css("height",
$(".description").prev(".pic").height());
.pic {float: left; width: 50%; border: 1px solid red;}
.description {border: 1px dotted green;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<figure>
<div class="pic">pic1<br>this is a big pic</div>
<div class="description">one is OK</div>
</figure>
<figure>
<div class="pic">pic2<br>this<br> is a pic2<br>this is another big pic</div>
<div class="description">two is NOK</div>
</figure>
<figure>
etc...
</figure>
</div>
you can see, the code works only for the first description, the second description is still adjusted to the first one.
PS.
Please do not propose to reformat the HTML, I am wondering how to apply some JS code for a specific HTML element: something like to have "onload" on a div element, to correctly identify the previous element.
You can take advantage of the fact that .css() can be passed a function:
$(".description").css("height", function() {
var element = this; // current "description" element
return $(element).prev(".pic").height() + "px";
});
The value of this inside the callback function will be, in turn, each element that matches the selector (".description").
This code will do, you need to iterate through all the .pics
$(document).ready(function() {
$(".description").each(function(){
var height = $(this).parent().find('.pic').height();
$(this).css('height',height);
})
});
I'm working on a Facebook reaction bar so it is pretty hard to copy the code here because it has a lot of events binded but all of you got facebook so if you want to check it by yourself - please do it.
The thing is that I managed to move the reaction bar under the react root and now I wanted to make the clicked reaction counter change the background color of itself to green.
And everything is working almost good excluding one thing: it is one click behind. To make you understand better I recorded little example how it looks. The red pulse ring appears when I click: https://vid.me/HqYp
Here is the changing code:
$(this).find('div._iu-[role="toolbar"]').bind('click',function(){
$(this).find('p.counter').each(function(){$(this).css('background-color','#48649F');});
$(this).find('span[aria-pressed="true"]').find('p.counter').css('background-color','green');
});
$(this) is div[id*="post"] so in $(this) I'm getting div with the whole post.
I thought that maybe I should use a callback function after changing-every-counter-to-default-color function but I don't know am I right and if it's right solution.
Thanks from above. (:
You can probably simplify this a bit. Although without the html structure I can't know for sure how the layout of the function works with respect to the event origin. Also I am not sure when the aria-pressed is set to true so I made the function a bit more generic. You simply add a data attribute to target the span you want to be targeted by the click.
<div class="_lu-" role="toolbar" data-target=".facebook-counter">
Later in your javascript you do the following
var $t = $(this);
var $t.target = $(this).data('target');
$t.on('click','div._lu-[role="toolbar"]', function() {
$t.find($t.target).css({
'background-color':'green'
}).siblings().css({'background-color','#48649F'});
});
This code is assuming first that your spans are in the same container, and second that the first $(this) refers to the parent container of this whole toolbar, and last that you have put data-target="" attributes with selectors for the appropriate target you want to affect.
This is a sample:
$(document).ready(function(){
$('.toolbar').on('click','.toolbar-item .icon', function(event) {
event.preventDefault();
event.stopPropagation();
if(!this.$) this.$ = $(this);
if(!this.parent) this.parent = this.$.parent();
if(!this.counter) this.counter = this.$.siblings('.counter');
this.parent.addClass('selected').siblings('.selected').removeClass('selected');
var count = this.counter.data('value');
count++;
this.counter.data('value',count);
this.counter.html(count);
});
});
.toolbar {
font-size:0;
text-align:center;
}
.toolbar-item .icon {
background:#FFF;
padding:30px;
border:1px solid #AAA;
border-radius:100%;
margin:0 20%;
transition:0.8s ease all;
}
.selected .icon {
background:#369;
}
.toolbar-item .counter {
background:#E0E0E0;
margin:0 10px;
transition:0.4s ease background;
}
.selected .counter {
background:#509050;
}
.toolbar-item {
font-size:10pt;
width:25%;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toolbar">
<div class="toolbar-item">
<div class="icon">Like</div>
<div class="counter" data-value="0">0</div>
</div>
<div class="toolbar-item">
<div class="icon">Wow</div>
<div class="counter" data-value="0">0</div>
</div>
<div class="toolbar-item">
<div class="icon">Sad</div>
<div class="counter" data-value="0">0</div>
</div>
<div class="toolbar-item">
<div class="icon">Angry</div>
<div class="counter" data-value="0">0</div>
</div>
</div>
As of jQuery 1.7 they introduced the .on('click', function().... method. Try that instead and see if you get the same results.
Quick answer without having tested or the time to test your code. I recently had a performance issue with a nested function, so maybe look at that second line with the .each() method.
I am looking for way to change 'GetElementById' div inside the div, which I am targeting.
Here's the example:
Let's say I have this
<div onclick="runscript()">
<div id="insider">
</div>
</div>
<div onclick="runscript()">
<div id="insider">
</div>
</div>
<script>
function runscript(){
document.getElementById('insider').style.color='red';
}
</script>
If I would like to change exactly the same div, which I am clicking on, I could use this.style.color='red', but I need to change "insider" div inside exactly 'this' div I'm clicking on.
I am looking only for javascript solution, no jquery.
<div onclick="runscript(this)">
<div class="insider">
Sample text
</div>
</div>
Give the insider div a class name called insider and do this:
function runscript(object){
object.querySelector("div[class='insider']").style.color='red';
}
This works by passing the parent div to the runscript function with the keyword this. Then querySelector will try to find the element based upon the selector div[class='insider']. If found it will set the color of the text to red.
<div onclick="runscript(this)">
<div class="insider">
</div>
</div>
<div onclick="runscript(this)">
<div class="insider">
</div>
</div>
<script>
function runscript(object){
object.querySelector('.insider').style.color='red';
}
</script>
like in the comments above
id is an unique identifier - so it is not valid to have an id twice in your DOM
I recommend you to use addEventListener instead of the onclick attribute
I made a fiddle in pure javascript: http://jsfiddle.net/53bnhscm/8/
HTML:
<div onclick="runscript(this);">
<div class="insider"></div>
</div>
<div onclick="runscript(this);">
<div class="insider"></div>
</div>
CSS:
div {
border: 1px solid black;
height: 100px;
}
.insider {
border: 3px solid green;
height: 20px;
}
Javascript:
function runscript(x) {
x.firstElementChild.style.border = '1px solid red';
}