I am having trouble trying to make a switch in Javascript that when the switch activates, depending on the case, the program will display a number of new buttons which you can click and will play a sound.
This is my HTML and Javascript with the first set of buttons:
function selectchord(){
var userinput = document.getElementById("chord").value;
switch (userinput) {
case "a":
document.write("holas");
break;
}
}
function PlaySound(path) {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', path);
audioElement.play();
}
<input type="text" id="chord"></input>
<button onclick="selectchord()">Select chord</button>
<p id="demo"></p>
<button id="bt" type="button"
onclick="javascript:PlaySound('sounds/Am.wav');">
A minor
</button>
<button id="bt" type="button"
onclick="javascript:PlaySound('sounds/Bm.wav');">
B minor
</button>
In the case above, I just put in the switch there to see if it worked. I am really new to Javascript so I apologise if I am not using the correct terminology.
Thanks in advance
There are a couple of issues in your code...
I do not know exactly your intentions, but I think you are trying to do something like this:
var button = document.getElementById('selectChord');
button.addEventListener('click', selectChord, false);
function selectChord() {
var userinput = document.getElementById("chord").value.toLowerCase(),
html = '';
switch (userinput) {
case "a":
html += '<button id="A" onclick="playSound(this.id)">A</button>';
html += '<button id="Am" onclick="playSound(this.id)">Am</button>';
break;
case "b":
html += '<button id="B" onclick="playSound(this.id)">B</button>';
html += '<button id="Bm" onclick="playSound(this.id)">Bm</button>';
break;
default:
html += '<p>Oops!</p>';
}
document.getElementById('buttons').innerHTML = html;
}
function playSound(id) {
console.log(id);
}
#buttons {
margin: 10px 0;
}
<input type="text" id="chord">
<button id="selectChord">Select chord</button>
<div id="buttons"></div>
Related
I am fairly new to JavaScript,
I have ben working on a simple if else script to change the color of at button, depending on the status of a variable that I get from a plc (Siemens S7-1200).
The script is working fine and the color of the button is changing.
But I have 10 buttons that I want to run this script on.
Is it possible to “reuse” the script so that I don’t have to copy the script and change the variables for every button
T
<script>
var tag = ':="web_DB".outtag1:'
var button = "button1"
window.onload = function() {
if (tag == 1) {
document.getElementById(button).style.backgroundColor = 'green';
} else{
document.getElementById(button).style.backgroundColor = 'red';
}
}
</script>
<form>
<input type="submit" id="button1" value="button">
<input type="hidden" name='"web_DB".intag1' value ="1">
</form>
It's hard to be sure since you haven't posted all your code and what you have posted doesn't actually work but I think you're looking for something like this.
const tags = [
':="web_DB".outtag1:',
':="web_DB".outtag2:',
//...
':="web_DB".outtag10:'
];
window.onload = function() {
for (let i = 0; i <= 9; i++) {
const color = (tags[i] == 1) ? 'green' : 'red';
document.getElementById('button' + (i+1)).style.backgroundColor = color;
}
}
I'm just trying to make a simple mobile-based calculator. So far I've managed to display the digits pressed up to a certain character limit. I'm trying to make it so it clears the digits within the h1 tag that serves as the display.
I've tried using .innerHTML = "", but that isn't working. How should I fix this?
HTML
<body>
<h1 id="display">Calculator</h1>
<div class="buttons container" id="arithmetic">
<button onclick="clear()" onkeypress="clear()">AC</button>
<button><sup>+</sup>⁄<sub>−</sub></button>
<button>%</button>
<button>÷</button>
<button onclick="number(7)" onkeypress="number(7)">7</button>
<button onclick="number(8)" onkeypress="number(8)">8</button>
<button onclick="number(9)" onkeypress="number(9)">9</button>
<button>×</button>
<button onclick="number(4)" onkeypress="number(4)">4</button>
<button onclick="number(5)" onkeypress="number(5)">5</button>
<button onclick="number(6)" onkeypress="number(6)">6</button>
<button>−</button>
<button onclick="number(1)" onkeypress="number(1)">1</button>
<button onclick="number(2)" onkeypress="number(2)">2</button>
<button onclick="number(3)" onkeypress="number(3)">3</button>
<button>+</button>
<button>.</button>
<button id="doubleSpace" onclick="number(0)" onkeypress="number(0)">0</button>
<button>=</button>
</div>
<div class="calcOptions container">
<button>Arithmetic</button>
<button>Algebra</button>
<button>Calculus</button>
<button>Statistics</button>
</div>
</body>
JavaScript
var currentQuery;
var pastQuery;
var queryLength = document.getElementById("display").innerHTML.length;
function number(n) {
if (document.getElementById("display").innerHTML == "Calculator") {
document.getElementById("display").innerHTML = "";
}
if (queryLength >= 15) {
} else {
currentQuery = document.getElementById("display").innerHTML;
currentQuery += n;
document.getElementById("display").innerHTML = currentQuery;
}
}
function clear() {
currentQuery = "";
document.getElementById("display").innerHTML = currentQuery;
}
You can't name a javascript function with clear(), and the value of queryLength should set after the document ready replace your code by:
var currentQuery;
var pastQuery;
var queryLength;
document.addEventListener("DOMContentLoaded", function(event) {
var queryLength = document.getElementById("display").innerHTML.length;
})
function number(n) {
if (document.getElementById("display").innerHTML == "Calculator") {
document.getElementById("display").innerHTML = "";
}
if (queryLength >= 15) {
} else {
currentQuery = document.getElementById("display").innerHTML;
currentQuery += n;
document.getElementById("display").innerHTML = currentQuery;
}
}
function clearValue() {
currentQuery = "";
document.getElementById("display").innerHTML = currentQuery;
}
and the clear button with:
<button onclick="clearValue()" onkeypress="clearValue()">AC</button>
The problem is that the name of your function clear is already used by this native function document.clear(). Here is a deeper look on why this native function is called and not your function: Is “clear” a reserved word in Javascript?.
The solution is to simply rename your clear() function to something else e.g. allcancel()
You can try using .innerText = "".
I'm trying to copy some values between elements but doesn't work.
What's wrong?!
This two rows works well
document.getElementById('ftreturnslbl').style.display = 'block';
document.getElementById('ftasc1primoritorno').style.display = 'block';
function ff_returnasc1primo_action(element, action)
{
switch (action) {
case 'click':
document.getElementById('ftreturnslbl').style.display = 'block';
document.getElementById('ftasc1primoritorno').style.display = 'block';
document.getElementById('toftasc1primoreturn').value =
document.getElementById('fromftasc1primo').value;
document.getElementById('fromftasc1primoreturn').value = document.getElementById('toftasc1primo').value;
break;
default:;
}
}
This code works in all common browsers.
I dont know where your error is or how your html looks like, but this is a minimum of the case, which i understood.
function copy(){
var fromValue = document.getElementById('from').value;
var returnValue = document.getElementById('return').value;
document.getElementById('to').value = fromValue;
document.getElementById('toReturn').value = returnValue;
}
document.getElementById('copyBtn').addEventListener('click',copy);
<div>from:</div>
<div>
<input id="from"><input id="return">
</div>
<div>to:</div>
<div>
<input id="to"><input id="toReturn">
</div>
<button id="copyBtn">
Copy
</button>
I have a a number of buttons that a user can click on in response to a question. Some of the buttons are correct answers, and others are incorrect. If the button is an incorrect answer, the button remains live, but a counter increments counting wrong answers. If the button is a correct answer, then I want to increment the correct answer count, change the button styling, and disable the button. Code snippet (html):
<div class="container" ng-controller="myCtrl">
<div>
Right answers: {{ right_answers }}
</div>
<div>
Wrong answers: {{ wrong_answers }}
</div>
<button ng-style="answer1Style" ng-click="clickThis('answer1')" ng-disabled='answer1'> Answer1 </button>
<button ng-style="answer2Style" ng-click="clickThis('answer2')" ng-disabled='answer2'> Answer2 </button>
<button ng-style="answer3Style" ng-click="clickThis('answer3')" ng-disabled='answer3'> Answer3 </button>
<button ng-click="clickThis('wrong1')" ng-disabled='wrong1'> Wrong1 </button>
<button ng-click="clickThis('wrong2')" ng-disabled='wrong2'> Wrong2 </button>
<button ng-click="clickThis('whatever')" ng-disabled='whatever'> Whatever </button>
</div>
Code snippet (controller):
var myCtrl = function($scope) {
$scope.right_answers = 0;
$scope.wrong_answers = 0;
$scope.answers = ['answer1','answer2','answer3'];
$scope.clickThis = function(answer) {
if ($scope.answers.indexOf(answer) != -1) {
$scope.right_answers += 1;
switch(answer){
case 'answer1':
$scope.answer1 = true;
$scope.answer1Style = {'background-color':'green', 'color':'white'};
break;
case 'answer2':
$scope.answer2 = true;
$scope.answer2Style = {'background-color':'green', 'color':'white'};
break;
case 'answer3':
$scope.answer3 = true;
$scope.answer3Style = {'background-color':'green', 'color':'white'};
break;
};
}
else {
$scope.wrong_answers += 1;
};
};
};
My question is, is there a way to make this more generic, where I don't have to use a CASE and include a $scope for each individual answer in order to disable it (or change the style for that matter), i.e. ng-disabled="answer1", ng-disabled="answer2", $scope.answer1, $scope.answer2?
Thanks!
You can pass $event object as argument of ngClick directive.
<button ng-click="clickThis($event, 'answer')"> Answer </button>
Then you will be able to do manipulations with target element in $scope.clickThis function
$scope.clickThis = function(event, answer) {
if ($scope.answers.indexOf(answer) != -1) {
$scope.rightAnswers += 1;
element = angular.element(event.target);
element.css({'color': 'white', 'background-color': 'green'});
element.prop('disabled', true)
} else {
$scope.wrongAnswers += 1;
};
}
Example: plnkr.co
I managed to save the text that is in the input field but the problem is that i do not know how to save the button. The buttons turn white when i click on them and the price of that seat will be visible in the input field. The price saves but the button does not stay white.
<script>
function changeBlue(element) {
var backgroundColor = element.style.background;
if (backgroundColor == "white") {
element.style.background = "blue";
add(-7.5)
} else {
element.style.background = "white";
add(7.5)
}
}
function add(val) {
var counter = document.getElementById('testInput').value;
var b = parseFloat(counter,10) + val;
if (b < 0) {
b = 0;
}
document.getElementById('testInput').value = b;
return b;
}
function save(){
var fieldValue = document.getElementById("testInput").value;
localStorage.setItem("text", fieldValue)
var buttonStorage = document.getElementsByClass("blauw").value;
localStorage.setItem("button", buttonStorage)
}
function load(){
var storedValue = localStorage.getItem("text");
if(storedValue){
document.getElementById("testInput").value = storedValue;
}
var storedButton = localStorage.getItem("button");
if(storedButton){
document.getElementsByClass("blauw").value = storedButton;
}
}
</script>
<body onload="load()">
<input type="text" id="testInput"/>
<input type="button" id="testButton" value="Save" onclick="save()"/>
<input class="blauw" type="button" id="testButton2" value="click me to turn white"
style="background-color:blue" onclick="changeBlue(this)">
<input class="blauw" type="button" id="testButton2" value="click me to turn white"style="background-color:blue" onclick="changeBlue(this)">
</body>
i made a small sample of what i want to do. And i do not want to use the Id's of the buttons because i have like 500 of them in a table.
That's because getElementsByClass (it's getElementsByClassName btw) returns a node list of all the elements with that class.
To make it work, you need to go through all the items in the list, using a for-loop, and set the value of each individual element to the localStorage-value.
See these links for more information:
Link 1
Link 2
Very small mockup to give you an idea:
(In the JS, I put in comments the lines of code you would be using for your situation.)
function changeValues() {
var list = document.getElementsByClassName("child"); //var list = document.getElementsByClassName("blauw");
for (var i=0; i<list.length; i++) {
list[i].innerHTML = "Milk"; //list[i].value = storedButton;
}
}
<ul class="example">
<li class="child">Coffee</li>
<li class="child">Tea</li>
</ul>
<p>Click the button to change the text of the first list item (index 0).</p>
<button onclick="changeValues()">Try it</button>