I am making a calculator with HTML, CSS, and JS. Currently, I want a number to be concatenated to the output everytime I click a number button. Does anyone know how to do this because my code isn't working. The console keeps returning output.concat is not a function
const numbers = document.querySelectorAll("[data-number]");
numbers.forEach(number => {
number.addEventListener("click", () => {
output.concat(number);
})
})
<div>
<div data-output></div>
<button data-clear>C</button>
<button data-operator>/</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data-operator>*</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-operator>-</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operator>+</button>
<button data-number>0</button>
<button data-number>.</button>
<button data-equals>=</button>
</div>
You need to define output, as currently it is undefined. Do it like this:
const output = document.querySelector("[data-output]");
And then, you must treat it like an element, not like a string. The same is true for the number variable: it is not a string (nor number), but a button element. So read and add content using the textContent property on both involved elements:
output.textContent += number.textContent;
NB: You have an error in your first line. It needs a closing ] in the selector:
const numbers = document.querySelectorAll("[data-number]");
Code:
const output = document.querySelector("[data-output]");
const numbers = document.querySelectorAll("[data-number]");
numbers.forEach(number => {
number.addEventListener("click", () => {
output.textContent += number.textContent;
})
})
<div>
<div data-output></div>
<button data-clear>C</button>
<button data-operator>/</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data-operator>*</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-operator>-</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operator>+</button>
<button data-number>0</button>
<button data-number>.</button>
<button data-equals>=</button>
</div>
I probably won't take this approach but building on your code you probably want something like
const numbers = document.querySelectorAll("[data-number]");
const operator = document.querySelectorAll("[data-operator]");
const clear = document.getElementById("clear");
const output = document.getElementById("output");
resu=""
numbers.forEach(number => {
number.addEventListener("click", () => {
resu+=number.textContent
output.textContent=resu
})
})
operator.forEach(op => {
op.addEventListener("click", () => {
if(output.textContent.charAt(output.textContent.length-1)===op.textContent) return
else {resu+=op.textContent
output.textContent=resu}
})
})
clear.addEventListener("click",()=>{
output.textContent=""
})
<div>
<div data-output></div>
<button data-clear id="clear">C</button>
<button data-operator>/</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data-operator>*</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-operator>-</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operator>+</button>
<button data-number>0</button>
<button data-number>.</button>
<button data-equals>=</button>
</div>
<div id="output">#######</div>
Related
I am working on a countdown watch which have a virtual numpad (given in code as button) and three input (hour,minute and second). now i want that whenever i click input box and type in virtual numpad ,it print the value in that box only.
there i used three ref to getElement of input and change set their value but dont know how to set for specific box
const inputOne = useRef(null);
const inputTwo = useRef(null);
const inputThree = useRef(null);
const changeValue = (val) => {
inputOne.current.value = setTime({hour: updatedHour + val, minute: updatedMinute, second: updatedSecond});
inputTwo.current.value = setTime({hour: updatedHour, minute: updatedMinute + val, second: updatedSecond});
inputThree.current.value = setTime({hour: updatedHour, minute: updatedMinute, second: updatedSecond + val});
}
const changeTime = (e) => {
setTime({ ...time, [e.target.name]: e.target.value });
};
this is input fields i use , updatedHour,updatedMinute and updatedSecond is part of setTime state.
<input ref={props.inputOne} onChange={props.changeTime} name="hour" placeholder="Hour" value={props.updatedHour} />
<input ref={props.inputTwo} onChange={props.changeTime} name="minute" placeholder="Minute" value={props.updatedMinute} />
<input ref={props.inputThree} onChange={props.changeTime} name="second" placeholder="Second" value={props.updatedSecond} />
this is buttons which create virtual keyboard
<button className="grid-item" tpye='button' onClick={()=> props.changeValue('1')}>1</button>
<button className="grid-item" tpye='button' onClick={()=> props.changeValue('2')}>2</button>
<button className="grid-item" tpye='button' onClick={()=> props.changeValue('3')}>3</button>
<button className="grid-item" tpye='button' onClick={()=> props.changeValue('4')}>4</button>
<button className="grid-item" tpye='button' onClick={()=> props.changeValue('5')}>5</button>
<button className="grid-item" tpye='button' onClick={()=> props.changeValue('6')}>6</button>
<button className="grid-item" tpye='button' onClick={()=> props.changeValue('7')}>7</button>
<button className="grid-item" tpye='button' onClick={()=> props.changeValue('8')}>8</button>
<button className="grid-item" tpye='button' onClick={()=> props.changeValue('9')}>9</button>
<button className="grid-item" tpye='button' >Prev</button>
<button className="grid-item" tpye='button' onClick={()=> props.changeValue('0')}>0</button>
<button className="grid-item" tpye='button' >Next</button>
I've just copied whatever you've been writing and added it to stackblitz, and I've added some changes to it the link is below, hope you find it useful:
link to stackblitz for the solution
I don't understand why my first button can have an eventlistener assigned, but my second one won't. There are no error messages and I'm able to access its value and even change its style via element.style.border="2px red solid" for example.
const recipeTypeMenuContainer = document.querySelector(".recipe-type-menu-container"),
recipeTypeMenuSection = document.querySelector(".recipe-type-menu-section"),
breakfast_menuButton = document.querySelector(".recipe-type-menu_breakfast"),
appetizer_menuButton = document.querySelector(".recipe-type-menu_appetizer"),
entrees_menuButton = document.querySelector(".recipe-type-menu_entrees"),
dessert_menuButton = document.querySelector(".recipe-type-menu_dessert"),
menuButtons = [breakfast_menuButton,appetizer_menuButton,entrees_menuButton,dessert_menuButton];
////////////RECIPE or BLOG section///////////////
////////****works***///////////////////
enterRecipePicture.addEventListener('click',function(){
recipeOrBlogContainer.classList.add('js-fadehide');
searchbarContainer.classList.add('js-fadehide');
})
////////////TYPE OF RECIPE section///////////////
///***doesn't work and doesn't throw error**////
breakfast_menuButton.addEventListener("click",function(){
recipeTypeMenuContainer.style.border = "2px red solid";
})
<div class="recipe-type-menu-container">
<div class="recipe-type-menu-row"></div>
<div class="recipe-type-menu-row">
<center>
<form class="recipe-type-menu-section" action="recipe-blog.php" method="POST">
<button type="submit" class="recipe-type-menu_breakfast" id="recipetype_breakfast" name="recipe-type" value="breakfast" >breakfast</button>
<button type="submit" class="recipe-type-menu_appetizer" id="recipetype_appetizer" name="recipe-type" value="appetizer">appetizer</button>
<button type="submit" class="recipe-type-menu_entrees" id="recipetype_entrees" name="recipe-type" value="entrees">entrees</button>
<button type="submit" class="recipe-type-menu_dessert" id="recipetype_dessert" name="recipe-type" value="dessert">dessert</button>
</form>
</center>
</div>
<!------ recipe-type-menu-row ----->
<div class="recipe-type-menu-row"></div>
</div>
You are using type="submit" on your buttons, so when its clicked it submit the form, you need to add e.preventDefault() ( check this link how-does-e-preventdefault-work ) or use type="button" if you dont want the button to submit the form
const recipeTypeMenuContainer = document.querySelector(".recipe-type-menu-container"),
recipeTypeMenuSection = document.querySelector(".recipe-type-menu-section"),
breakfast_menuButton = document.querySelector(".recipe-type-menu_breakfast"),
appetizer_menuButton = document.querySelector(".recipe-type-menu_appetizer"),
entrees_menuButton = document.querySelector(".recipe-type-menu_entrees"),
dessert_menuButton = document.querySelector(".recipe-type-menu_dessert"),
menuButtons = [breakfast_menuButton,appetizer_menuButton,entrees_menuButton,dessert_menuButton];
////////////RECIPE or BLOG section///////////////
////////****works***///////////////////
/*
enterRecipePicture.addEventListener('click',function(){
recipeOrBlogContainer.classList.add('js-fadehide');
searchbarContainer.classList.add('js-fadehide');
})
*/
////////////TYPE OF RECIPE section///////////////
///***doesn't work and doesn't throw error**////
breakfast_menuButton.addEventListener("click",function(e){
e.preventDefault()
recipeTypeMenuContainer.style.border = "2px red solid";
})
<div class="recipe-type-menu-container">
<div class="recipe-type-menu-row"></div>
<div class="recipe-type-menu-row">
<center>
<form class="recipe-type-menu-section" action="recipe-blog.php" method="POST">
<button type="button" class="recipe-type-menu_breakfast" id="recipetype_breakfast" name="recipe-type" value="breakfast" >breakfast</button>
<button type="submit" class="recipe-type-menu_appetizer" id="recipetype_appetizer" name="recipe-type" value="appetizer">appetizer</button>
<button type="submit" class="recipe-type-menu_entrees" id="recipetype_entrees" name="recipe-type" value="entrees">entrees</button>
<button type="submit" class="recipe-type-menu_dessert" id="recipetype_dessert" name="recipe-type" value="dessert">dessert</button>
</form>
</center>
</div>
<!------ recipe-type-menu-row ----->
<div class="recipe-type-menu-row"></div>
</div>
I am building a Calculator and I keep getting this error, I've tried typing it a few different ways but I couldn't figure it out, help, please!
const calculator = {
displayValue: '0',
firstOperand: null,
waitingForSecondOperand: false,
operator: null,
};
function updateDisplay() {
const display = document.querySelector('.calculator-screen');
display.value = calculator.displayValue;
}
updateDisplay();
I get the error on the
display.value = calculator.displayValue;
this is the html for the file
<div class="calculator">
<input type="text" class="calculator-screen" value = "0" disabled />
<div class="calculator-keys">
<button type="button" class="operator" value="+">+</button>
<button type="button" class="operator" value="-">-</button>
<button type="button" class="operator" value="*">×</button>
<button type="button" class="operator" value="/">÷</button>
That error means that this line:
const display = document.querySelector('.calculator-screen');
Is returning null. So when you do this:
display.value = calculator.displayValue;
You're really saying:
null = calculator.displayValue;
Try logging the value and check for yourself:
function updateDisplay() {
const display = document.querySelector('.calculator-screen');
console.log('display: ', display); // this is probably 'null'
display.value = calculator.displayValue;
}
I'm guessing you don't have a selector with the class .calculator-screen. Double-check the spelling or post the relevant HTML so I can confirm.
Here is your code, it seems to work fine I don't get an error so I'm not sure what's going on on your end:
const calculator = {
displayValue: '0',
firstOperand: null,
waitingForSecondOperand: false,
operator: null,
};
function updateDisplay() {
const display = document.querySelector('.calculator-screen');
display.value = calculator.displayValue;
}
updateDisplay();
<div class="calculator">
<input type="text" class="calculator-screen" value = "0" disabled />
<div class="calculator-keys">
<button type="button" class="operator" value="+">+</button>
<button type="button" class="operator" value="-">-</button>
<button type="button" class="operator" value="*">×</button>
<button type="button" class="operator" value="/">÷</button>
</div>
</div>
It seems your document.querySelector is not finding the element you need.
This error means probably display is null when you try to set it's value, and the only thing that could cause this is the corrector not finding the selection you wanted.
It is probably due to the disabled property of the input html tag. Remove the disabled attribute and try if it works.
I have table column like this which have value that comes from my reducer. the same column has increment/decrement button. so when use clicks on button I have to get value from that <td> and trigger my action. I am searching here but its for input text which have event onChange. please anyone let me know how to do this?
Here is my <td> column:
<td>
{this.props.prog}%
<button type="button" className="btn btn-danger">
<span className="glyphicon glyphicon-arrow-up" />
</button>
<button type="button" className="btn btn-danger">
<span className="glyphicon glyphicon-arrow-down" />
</button>
</td>
EDIT 1:
I have tried something basically my onClick triggered properly but I am not able to pass the value
<td>
<button type="button" className="btn btn-danger" onClick={this.props.resetGrowth}>Reset</button>
{this.props.prog}%
<button type="button" className="btn btn-danger" onClick = {(event) => this.props.updated(this.props.prog) }>
<span className="glyphicon glyphicon-arrow-up"/>
</button>
<button type="button" className="btn btn-danger">
<span className="glyphicon glyphicon-arrow-down"/>
</button>
</td>
it will pass to it this component
<Table updated={value => this.props.udated(value)}/>
this is my container it triggers value
<VolumeComponent
udated = {(value) => updated(value)}/>
const mapDispatchToProps= (dispatch) => (
bindActionCreators({updated},dispatch)
)
Since you are using a reducer I am guessing you are using redux. If {this.props.prog}is your value, you could use this in the OnClick function you pass to the increase/ decrease buttons. For example:
handleDecrease(){
const newValue = this.props.prog + 1;
this.props.updateValue(newValue)
}
handleIncrease(){
const newValue = this.props.prog - 1;
this.props.updateValue(newValue)
}
render(){
return (
...
<button onClick={this.handleIncrease}/>
);
}
I am looking to generate a json string based on the button selection on a html page.
<div id="btnStudios" >
<button type="button" id="01" value="warner" class="btn btn-default">Warner</button>
<button type="button" id="02" value="tf1" class="btn btn-default">TF1</button>
<button type="button" id="03" value="gaumont" class="btn btn-default">Gaumont</button>
<button type="button" id="04" value="pathe" class="btn btn-default">Pathe</button>
<button type="button" id="05" value="studiocanal" class="btn btn-default">StudioCanal</button>
<button type="button" id="06" value="francetv" class="btn btn-default">FranceTV</button>
<button type="button" id="07" value="m6snd" class="btn btn-default">M6SND</button>
</div>
<div id = "btnplatforms" class="btn-group">
<button type="button" id = "11" value="orange" class="btn btn-default">Orange</button>
<button type="button" id = "12" value="itunes" class="btn btn-default">iTunes</button>
<button type="button" id = "13" value="sfr" class="btn btn-default">SFR</button>
</div>
$(".btn").click(function() {
$(this).toggleClass('active');
});
Based on the active state of the button i want the result to be for example
{Studios : Warner, Gaumont
Platform : Orange, iTunes}
Is this possible to achive this with javascript? If yes how?
Thanks in advance for your help.
You can try this :
var btn_active_array = {
"Studios" : [],
"Platform":[]
};
$('#btnStudios .btn.active').each(function(index,btn_active){
btn_active_array["Studios"].push($(btn_active).text());
});
$('#btnplatforms .btn.active').each(function(index,btn_active){
btn_active_array["Platform"].push($(btn_active).text());
});
jsfiddle link : https://jsfiddle.net/5kb5fdyz/
You can try this:
var output = {
Studios: $('#btnStudios button.active').map(function() {
return $(this).val();
}).get(),
Platform: $('#btnplatforms button.active').map(function() {
return $(this).val();
}).get()
};
here is jsFiddle.