Hey sorry if this question has been answered but im having trouble trying to adjust the dom volume with jQuery here is the code:
<script>
$(document).ready(function() {
slider = document.querySelector("input");
slider.oninput = function() {
progressBar = document.querySelector("progress");
progressBar.value = slider.value;
sliderValue = document.querySelector("span")
sliderValue.innerHTML = Math.round(slider.value);
}
})
</script>
I tried using a selector and then target the volume with .volume but it only adjusted the volume for the first audio tag not all of them.
<script>
$(document).ready(function() {
slider = document.querySelector("input");
slider.oninput = function() {
progressBar = document.querySelector("progress");
progressBar.value = slider.value;
sliderValue = document.querySelector("span")
sliderValue.innerHTML = Math.round(slider.value);
let domConverter = Math.round(slider.value) / 100
const volume = document.querySelector("audio").volume;
document.querySelector("audio").volume = domConverter;
}
})
</script>
First: You are targeting a single element. For multiple element listeners, use querySelectorAll and loop in a forEach (or other iterator)
Second: Rather than element.oninput, use element.addEventListener('input',...
Third, you were mixing jQuery and Vanilla which is fine, but I made it all vanilla for this example.
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll("input[type=range]").forEach(slider => {
slider.addEventListener('input', e => {
progressBar = document.querySelector(".progress");
progressBar.value = e.target.value;
sliderValue = document.querySelector("span")
sliderValue.innerHTML = Math.round(e.target.value);
let domConverter = Math.round(e.target.value) / 100
const volume = document.querySelector("audio").volume;
document.querySelector("audio").volume = domConverter;
})
})
})
Related
I want to change the value like this when I press the next button while on the current page.
I wrote the code like this, but it doesn't work at all:
el.delegate(".nextbtn", "click", function (event) {
const current = $(event.currentTarget) // =.nextbtn
const currentR = $(".pagination-range")
let pageNumber = +currentR.val() // =currentPage
let minV = +currentR.attr("min")
let maxV = +currentR.attr("max")
if (self.getTotalPage >= maxV) {
currentR.attr({
min: pageNumber,
max: pageNumber + 4,
})
}
})
What's wrong with this code? Thank you in advance.
Here is pure javascript solution for you. I defined my own $ as shorthand function, which utilizes querySelector, so its similar to jQuery.
const $ = (s) => document.querySelector(s);
const rng = $("#rng");
const button = $("#biggerMax");
button.addEventListener("click", () => {
console.log("adding max value by 4");
let rngMax = rng.getAttribute("max");
let newMax = parseInt(rngMax)+4;
rng.setAttribute("max", newMax );
});
<input id="rng" type=range min=2 max=5 step=1>
<button id="biggerMax">Bigger max</button>
I'm trying to take the user input, which is obtained with an event listener, display it on the page, and store the value in an array for further use. However, the array stays empty. Any ideas?
let arr = [];
function display() {
let p = document.querySelector('p');
let btn = document.querySelector('btn');
let input = document.querySelector('input').value;
btn.addEventListener('click', () => {
p.textContent = input;
arr.push(input);
});
}
display();
function display() {
let p = document.querySelector('p');
let arr = [];
let btn = document.querySelector('btn');
btn.addEventListener('click', () => {
let input = document.querySelector('input').value; // <-- move this line here
p.textContent = input;
arr.push(input);
});
}
display()
Your problem is that you're reading input out before the button has an event listener - so the current value (an empty string) will be read. Make sure to declare input inside the event listener:
btn.addEventListener('click', () => {
let input = document.querySelector("input").value;
p.textContent = input;
arr.push(input);
});
I believe the issue is that document.querySelector('btn') is not properly selecting the button because there is no such thing as a btn element. You'll need to change that to document.querySelector('button'). Then, combine that with what the other answers have mentioned -- you also need to capture the input value inside the event handler function.
let arr = [];
function display() {
let p = document.querySelector("p");
let btn = document.querySelector("button");
btn.addEventListener("click", () => {
let input = document.querySelector("input").value;
p.textContent = input;
arr.push(input);
});
}
display();
I set up two events, one in feet and one in inches. I'm trying to grab the value of each event which would be feet and inches but I can't because of each event's scope. Is there a way to pass both values into my totalHeight function so that I can add the two values together?
const justFeet = totalFeet.addEventListener('input', (e) => {
const heightInFeet = e.target.value;
let displayFeet = document.createElement('h3')
displayFeet.textContent = heightInFeet * 12
// totalInches.appendChild(displayFeet)
})
const justInches = inches.addEventListener('input', (e) => {
const addOnInches = e.target.value;
let displayInches = document.createElement('h3')
displayInches.textContent = addOnInches
// totalInches.appendChild(displayInches)
})
function totalHeight (feet, inches) {
const finalTotal = feet + inches;
let finalHeight = document.createElement('h3')
finalHeight.textContent = finalTotal
totalInches.appendChild(finalHeight)
}
totalHeight(displayFeet, displayInches)
An example of what it looks like you are trying to do. There's more you need to do, for example I used integers below but you could use floating numbers and perhaps add better handling for isNaN().
<html>
<style>
</style>
Feet:<input id="feet" type="number"></input>
Inches:<input id="inches" type="number"></input>
<h3>Feet converted to inches: <span id="displayFeetToInches"></span></h3>
<h3>Inches: <span id="displayInches"></span></h3>
<h3>Total inches:<span id="finalHeight"></span></h3>
<script>
const feet = document.getElementById("feet");
const inches = document.getElementById("inches");
const total = document.getElementById("total"); //in inches
const displayFeetToInches = document.getElementById("displayFeetToInches"); //in inches
const displayInches = document.getElementById("displayInches"); //in inches
const justFeet = feet.addEventListener('input', (e) => {
console.log('justFeet');
const heightInFeet = e.target.value;
displayFeetToInches.textContent = heightInFeet * 12;
totalHeight();
})
const justInches = inches.addEventListener('input', (e) => {
console.log('justInches');
const addOnInches = e.target.value;
displayInches.textContent = addOnInches
totalHeight();
})
function totalHeight (feet, inches) {
console.log('totalinches');
const ftToInches = displayFeetToInches.textContent;
const addOn = displayInches.textContent;
const finalTotal = parseInt(ftToInches) + parseInt(addOn);
finalHeight.textContent = finalTotal
}
</script>
</html>
I'm working on a synth-like program in the browser using web audio. This may sound stupid, but I can't seem to get the button to create the knob when it's clicked. I've tried setting up the knob in a few different ways including, adding the data- prefix to the knobs attributes, but i can't seem to get it. The way I currently have it set up is this:
$(document).ready(function()
{
var add_osc = $('li#add_osc');
var osc;
var add_dest = $('li#add_dest');
var dest;
var add_fx = $('li#add_fx');
var fx = $('.fx');
//left side menu
$('#simple-menu').sidr();
//hide sound fx in menu
$(".fx").hide();
//general purpose knob <----- **PROBLEM CODE** -----!
add_osc.click(function()
{
var input = $('document').createElement("input");
input.type = "text";
input.addClass('dial');
$(".dial").knob();
input.min = 0;
input.max = 100;
input.displayPrevious = true;
input.lineCap = "round";
input.width = 100;
input.value = 0;
$("body").append(input);
});
//toggle fx list
add_fx.click(function()
{
fx.toggle();
});
});
any help is appreciated!
You have to set the needed plugin data-attribute and than execute the plugin on the newly created and appended element.
Code:
$(document).ready(function () {
var add_osc = $('li#add_osc');
var osc;
var add_dest = $('li#add_dest');
var dest;
var add_fx = $('li#add_fx');
var fx = $('.fx');
//hide sound fx in menu
$(".fx").hide();
//general purpose knob <----- **PROBLEM CODE** -----!
add_osc.click(function () {
var $input=$("<input type='text'>")
$input.addClass('dial');
$input.attr('data-min', 0);
$input.attr('data-max', 100);
$input.attr('data-displayPrevious', true);
$input.attr('data-lineCap', 'round');
$input.attr('data-width', 100);
$input.val(0);
$("body").append($input);
$input.knob();
});
//toggle fx list
add_fx.click(function () {
fx.toggle();
});
});
Demo: http://jsfiddle.net/hD8LK/
I have created a "prev/next" slideshow using javascript, now I want to add a counter(1/10, 2/10, 3/10...) beside my "prev/next" buttons but nothing seemed to work.
This is my first time attempting to make a website, I know nothing about jQuery, so please stick with html+javascript if possible. Here is my script
var image = new Array(
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg",
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg")
var imgNumber=1
var numberOfImg=2
function previousImage(){
if(imgNumber>1){
imgNumber--
}
else{
imgNumber = numberOfImg
}
document.slideImage.src = image[imgNumber-1]
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.slideImage.src = image[imgNumber-1]
}
if(document.images){
var image1 = new Image()
image1.src = "http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg"
var image2 = new Image()
image2.src = "http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg"
}
Script+html: http://jsfiddle.net/nLHY9/5/
(Prev/Next buttons seem not to be working on this----they work fine when I launched them from laptop to browser.)
you could have used some existing javascript image sliders, for example, sliderman slider, for your current code, you can do like, add an element like span, to hold the count, and you could add a function like:
function changeCounter(cur, total) {
document.getElementById("counter").innerHTML = cur + "/" + total;
}
and call it in your previousImage() and nextImage() functions, as in this demo jsfiddle
There are many pure css slideshows that are beautiful and can do impressive things. However, as you try to support older browsers, the pure css slideshows get less and less impressive or even impossible. JavaScript is the most flexible and powerful way to go. That being, I wanted to help you clean up your code. I only had a few minutes, so this is a quickly thrown together plugin, but it should get you on the right track.
First, a few notes on your code:
//you're missing semicolons everywhere. ";"
/* "var image" is very unclear.
* it's an array, so it should be plural "images"
* there aren't images in this array - it's image urls or sources
* instead of "new Array" you could just use "[]"
*/
var image = new Array(
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg",
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg")
var imgNumber=1 //the name doesn't mean anything. I have to assume that you mean "currentImgNumber" or something to that effect
var numberOfImg=2 //this could be determined by checking the length of your array - myArray.length
And here's my exampe plugin:
Live demo here (click).
/***** This section is how you use the plugin. I start writing with the usage and then I make it mean something *****/
window.onload = function() { //when the page is loaded
var fooElem = document.getElementById('foo'); //get an element where we will attach the plugin
var foo = Object.create(slideshow); //create a new slideshow object
foo.create({ //create a slideshow with the given options
element: fooElem, //the element where the slideshow will be
sources: [ //image urls
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/_MG_7747.jpg",
"http://i990.photobucket.com/albums/af24/callmeaaaaj/AJ/1109163s.jpg"
]
});
//we can make more of these and with different options
var barElem = document.getElementById('bar');
var bar = Object.create(slideshow);
bar.create({
element: barElem,
sources: [
"http://eggboss.com/wp-content/uploads/2013/09/The-Gentleman-233x300.png",
"http://fc07.deviantart.net/fs71/f/2013/040/8/a/profile_picture_by_classy_like_a_sir-d5uf426.jpg"
]
});
};
/**** now let's create the plugin and make it work as it is used above *****/
var slideshow = {
currentIndex: 0,
imgs: [],
create: function(options) {
options.element.className+= ' slideshow'; //add a class to the main element for styling
this.imgs = this.getImgs(options.sources); //make img html
var controls = this.getControls(); //make controls
//add the html to the element from the options
var frag = document.createDocumentFragment();
this.imgs.forEach(function(img) {
frag.appendChild(img);
});
frag.appendChild(controls);
options.element.appendChild(frag);
},
getImgs: function(sources) {
var imgs = [];
sources.forEach(function(src, i) {
var img = document.createElement('img');
img.src = src;
imgs.push(img);
if (i > 0) {
img.style.display = 'none'; //hide all but first image
}
});
return imgs;
},
getControls: function() {
var that = this; //so that we can access "this" within the click functions
var controls = document.createElement('div');
controls.className = 'controls';
var counter = document.createElement('span');
counter.className = 'counter';
this.setCounter(counter);
var prev = document.createElement('a');
prev.textContent = 'Prev';
prev.className = 'prev';
prev.addEventListener('click', function() {
newIndex = (that.currentIndex) ? that.currentIndex-1 : that.imgs.length-1;
that.changeImg(newIndex, counter);
});
var next = document.createElement('a');
next.textContent = 'Next';
next.className = 'next';
next.addEventListener('click', function() {
newIndex = (that.currentIndex !== that.imgs.length-1) ? that.currentIndex+1 : 0;
that.changeImg(newIndex, counter);
});
controls.appendChild(prev);
controls.appendChild(next);
controls.appendChild(counter);
return controls;
},
changeImg: function(newIndex, counter) {
this.imgs[this.currentIndex].style.display = 'none';
this.imgs[newIndex].style.display = 'inline';
this.currentIndex = newIndex;
this.setCounter(counter);
},
setCounter: function(counter) {
counter.textContent = (this.currentIndex+1)+' / '+this.imgs.length;
}
};