Here is part of my html layout (with sciter framework):
<div id="volume_micphone_slider" style="z-index:1;">
<input id="volume_slider" class="volume_slider" type="vslider" name="p1c" max="100" value="20" buddy="p1c-buddy" />
</div>
<div>
<button id="volume_show" class="volume_show" ></button>
<button id="micphone_show" class="micphone_show"></button>
</div>
Here is my onClick() method of the Button(use tiscript):
var volume_flag=1;
function volume_ctrl()
{
if(volume_flag)
{
$(#volume_slider).style#display ="none";
volume_flag=0;
}
else
{
$(#volume_slider).style#display ="inline-block";
volume_flag=1;
}
}
$(#volume_show).onClick = function()
{
volume_ctrl();
}
But this method can't be useful.Please help me to figure out my problem.Thanks.
Multiple problems in your code as explained inline
var volume_flag=1;
function volume_ctrl()
{
if(volume_flag)
{
$("#volume_slider").style.display ="none"; //selector in quotes and . before style
volume_flag=0;
}
else
{
$("#volume_slider").style.display ="inline-block";
volume_flag=1;
}
}
$("#volume_show").onclick = function() //small c instead of C in onclick
{
volume_ctrl();
}
it is pure javascript code
var volume_flag = 1;
function volume_ctrl() {
if (volume_flag) {
document.getElementById('volume_slider').style.display = "none";
volume_flag = 0;
} else {
document.getElementById('volume_slider').style.display = "inline-block";
volume_flag = 1;
}
}
document.getElementById('volume_show').addEventListener("click", function() {
volume_ctrl();
})
Related
This js code is supposed to change the the value of class attribute 'skills__open' to 'skills__close' when the 'skills__header' div is clicked. It changes the 'skills__open' to 'skills__close' on the first click, but after the first click, it is not working.
Js
const skillsContent = document.getElementsByClassName('skills__content'),
skillsHeader = document.querySelectorAll('.skills__header')
function toggleSkills(){
let itemClass = this.parentNode.ClassName
for(i=0; i < skillsContent.length; i++){
skillsContent[i].className = 'skills__content skills__close'
}
if(itemClass === 'skills__content skills__close'){
this.parentNode.className = 'skills__content skills__open'
}
}
skillsHeader.forEach((el) =>{
el.addEventListener('click', toggleSkills)
});
Html
<div class="skills__content skills__open">
<div class="skills__header">
</div>
<div class="skills__content skills__close">
<div class="skills__header">
</div>
<div class="skills__content skills__close">
<div class="skills__header">
</div>
css
.skills__open .skills__list{
height: max-content;
margin-bottom: var(--mb-2-5);
}
.skills__open .skills__arrow{
transform: rotate(-180deg);
}
nothing significant
try that:
const skillsContents = document.querySelectorAll('.skills__content');
skillsContents.forEach( skc =>
{
skc
.querySelector('.skills__header')
.addEventListener('click', () =>
{
skillsContents.forEach( el =>
{
if (skc===el) el.classList.replace('skills__close','skills__open')
else el.classList.replace('skills__open','skills__close')
})
})
});
I am trying to make my javascript quiz page. I'm facing the issue set_correct class is applied to the all elements. But I want this class should be apply to only the correct answer. "set_wrong" class also should be apply to the wrong answer. please look at my code.
<div class="container">
<div class="button_port">
<input type="button" id="btnid" class="pevcls" value="Previous Question" onclick="Prevfn()">
<input type="button" id="btnidnt" class="nextcls" value="Next Question" onclick="Nextfn()">
</div>
<div class="content_box">
<div id="question">
</div>
<div id="answer_button">
</div>
</div>
</div>
var i=1;
var questionpos=document.querySelector(".content_box");
var getquestion=document.getElementById("question");
var answersbutton=document.getElementById("answer_button");
function Prevfn()
{
if(i==1)
{
document.getElementById("btnid").disabled=true;
alert("Dont have the previous one");
document.getElementById("btnidnt").disabled=false;
}
else{
i--;
setquestion();
}
}
function Nextfn()
{
if(i==5)
{
var ind=document.getElementById("btnidnt").disabled=true;
document.getElementById("btnid").disabled=false;
alert("Dont have next content");
}
else{
i++;
setquestion();
}
}
var allAnswerButtons = [];
function setquestion(question)
{
var questionsvari=questions[i].question;
getquestion.innerHTML=questions[i].question;
allAnswerButtons.forEach(abutton => abutton.remove());
allAnswerButtons = [];
questions[i].Answers.forEach(answer=>
{
const button=document.createElement("button");
button.classList.add('Ans_btn');
button.innerText=answer.text;;
if(answer.correct)
{
button.dataset.correct=answer.correct;
}
button.addEventListener('click', selectanswer);
answersbutton.appendChild(button);
allAnswerButtons.push(button)
}
)
}
function selectanswer(e)
{
var sal_answer=e.target;
var tof_value=sal_answer.dataset.correct;
Array.from(answersbutton.children).forEach(function(button)
{
setStatusClass(button,tof_value);
}
)
}
function setStatusClass(element,correct)
{
console.log(element);
if(correct=="true")
{
clearstatusclass(element);
element.classList.add('set_correct');
}
else
{
element.classList.add('set_false');
}
}
function clearstatusclass(element)
{
element.classList.remove('set_correct');
element.classList.remove('set_false');
}
const questions=[
{
question:"How many factors do a prime number have?",
Answers:[{text:'1 and the number itself',correct:'true'},{text:'2 and the 4',correct:'false'},{text:'3 and 6',correct:'false'},{text:'4 and 8',correct:'false'}]
},
{
question:"What type of term 2x+7y is?",
Answers:[{text:'234',correct:'true'},{text:'Binomial',correct:'false'},{text:'132',correct:'false'},{text:'222',correct:'false'}]
},
{
question:"What is the percentage of 2:5?",
Answers:[{text:'JavaScript',correct:'false'},{text:'40%',correct:'true'},{text:'JavaSql',correct:'false'}]
},
{
question:"Which food contains lactobacillus?",
Answers:[{text:'Curd',correct:'true'},{text:'Jojeshe',correct:'false'},{text:'JavaSql',correct:'false'},{text:'JavaSql',correct:'false'}]
},
{
question:"What is the national game of Bangladesh?",
Answers:[{text:'JavaScript',correct:'false'},{text:'Jojeshe',correct:'false'},{text:'Kabaddi',correct:'true'}]
},
{
question:"What is the national game of Bangladesh?",
Answers:[{text:'JavaScript',correct:'false'},{text:'Jojeshe',correct:'false'},{text:'Kabaddi',correct:'true'}]
}
];
My full code is below
https://codepen.io/pavisaran/pen/wvgQaew
Anyone please tell me where Im doing my mistake
When you click on the answer, you go through all the options (buttons) instead of setting for one.
function selectanswer(e)
{
var sal_answer=e.target;
var tof_value=sal_answer.dataset.correct;
Array.from(answersbutton.children).forEach(function(button)
{
setStatusClass(button,tof_value);
}
)
}
Change button.addEventListener('click', selectanswer); in setquestion to button.addEventListener('click', (e) => selectanswer(e, button));
And fix selectanswer
function selectanswer(e, button)
{
var sal_answer=e.target;
var tof_value=sal_answer.dataset.correct;
setStatusClass(button,tof_value);
}
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 = "".
<html>
<head><title></title></head>
<body>
<div id="mySidenav1" class="sidenavlogin">
×
Government Departments
Service Agencies
Citizen
</div>
<span class="login" onclick="openNav1()"> Login</span>
<!--api-->
<div id="mySidenav2" class="sidenavapi">
×
eKYB APK
eKYB API
</div>
<span class="api" onclick="openNav2()"> API</span>
<script>
function openNav1() {
document.getElementById("mySidenav1").style.width = "250px";
}
function closeNav1() {
document.getElementById("mySidenav1").style.width = "0";
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "200px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0";
}
</body>
</html>
in the above code when api panel is opened and when click on the login api panel should close. here i am posting the code please go through this an suggest.
Use style.display="none" instead of specifying width
Here is the updated code. When you click on login, API panel closes. and when you click on API, login panel closes.
function openNav1() {
document.getElementById("mySidenav2").style.display = "none";
document.getElementById("mySidenav1").style.display = "block";
}
function closeNav1() {
document.getElementById("mySidenav1").style.display = "none";
}
function openNav2() {
document.getElementById("mySidenav1").style.display = "none";
document.getElementById("mySidenav2").style.display = "block";
}
function closeNav2() {
document.getElementById("mySidenav2").style.display = "none";
}
.sidenavlogin,
.sidenavapi {
display: none;
}
<div id="mySidenav1" class="sidenavlogin">
×
Government Departments
Service Agencies
Citizen
</div>
+
<span class="login" onclick="openNav1()"> Login</span>
<!--api-->
<div id="mySidenav2" class="sidenavapi">
×
eKYB APK
eKYB API
</div>
+
<span class="api" onclick="openNav2()"> API</span>
use common class for nav blocks.
Like sideNav and style attributes instead of setting width.
function closeAll(){
var divsToHide = document.getElementsByClassName("sideNav");
for(var i = 0; i < divsToHide.length; i++) {
divsToHide[i].style.display = "none";
// divsToHide[i].style.width = "0"; // if purpose fully you want to use width then use this
}
}
function openNav1() {
closeAll();
document.getElementById("mySidenav1").style.display = "block";
}
You want to use element.style.display instead of width
element.style.display = 'block'; to show
element.style.display = 'none'; to hide
<html>
<body>
<div id="mySidenav1" class="sidenavlogin">
×
Government Departments
Service Agencies
Citizen
</div>
+
<span class="login" onclick="openNav1()"> Login</span>
<!--api-->
<div id="mySidenav2" class="sidenavapi">
×
eKYB APK
eKYB API
</div>
+
<span class="api" onclick="openNav2()"> API</span>
<script>
function openNav1() {
document.getElementById("mySidenav1").style.display = "block";
}
function closeNav1() {
document.getElementById("mySidenav1").style.display = "none";
}
function openNav2() {
document.getElementById("mySidenav2").style.display = "block";
}
function closeNav2() {
document.getElementById("mySidenav2").style.display = "none";
}
</script>
</body>
</html>
I'm facing this problem that whenever user clicks "Click" couple times and then clicks on "SEND" it shows clicked times the message.
For example if the dialog opens 5 times it shows 5 times the message.
Facing this problem couple times something with binding how can i fix this i dont want to learn a quick fix.
But a good way to code things.
var test = {
init: function() {
$(".toggle-dialog").on("click", function() {
$(".picture-upload-dialog").toggle("fast", function() {
if ($(this).is(":visible")) {
test2.uploadPicture()
}
});
});
}
},
test2 = {
uploadPicture: function() {
var submitButton = $(".submit-picture");
submitButton.on("click", function() {
var fileVal = $("#fileToUpload").val();
if (fileVal !== "") {
var ext = fileVal.split("."),
arrayExtensions = ["jpg", "jpeg", "png", "bmp", "gif"];
console.log(fileVal)
ext = ext[ext.length - 1].toLowerCase();
if (arrayExtensions.lastIndexOf(ext) == -1) {
test3.errorMessage(001)
}
} else {
test3.errorMessage(002)
}
})
}
},
test3 = {
errorMessage: function(type) {
var error;
switch (type) {
case 001:
error = "< Ext error >"
break;
case 002:
error = "< No picture selected. >"
break;
default:
return "ERROR"
}
$(".error").append(error)
}
}
test.init();
.picture-upload-dialog {
display: none;
}
.toggle-dialog:hover {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="error">
</div>
<div class="public-text-input">
<div class="text-options">
<i class="toggle-dialog ct icon-picture" title="Upload...">Click</i>
<div class="picture-upload-dialog">
<div class="picture-upload-header">
Upload your picture
</div>
<div class="picture-upload-content">
<input type="file" name="fileToUpload" id="fileToUpload">
<button class="ct icon-picture submit-picture">SEND</button>
</div>
</div>
</div>
<div id="color-picker"></div>
</div>
It is because you are calling test2.uploadPicture() every time it is visible, which in turn is adding one click handler every time "click" is clicked. Try the updated version:
var test = {
init: function() {
test2.uploadPicture()
$(".toggle-dialog").on("click", function() {
$(".picture-upload-dialog").toggle("fast", function() {
});
});
}
},
test2 = {
uploadPicture: function() {
var submitButton = $(".submit-picture");
submitButton.on("click", function() {
var fileVal = $("#fileToUpload").val();
if (fileVal !== "") {
var ext = fileVal.split("."),
arrayExtensions = ["jpg", "jpeg", "png", "bmp", "gif"];
console.log(fileVal)
ext = ext[ext.length - 1].toLowerCase();
if (arrayExtensions.lastIndexOf(ext) == -1) {
test3.errorMessage(001)
}
} else {
test3.errorMessage(002)
}
})
}
},
test3 = {
errorMessage: function(type) {
var error;
switch (type) {
case 001:
error = "< Ext error >"
break;
case 002:
error = "< No picture selected. >"
break;
default:
return "ERROR"
}
$(".error").append(error)
}
}
test.init();
.picture-upload-dialog {
display: none;
}
.toggle-dialog:hover {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="error">
</div>
<div class="public-text-input">
<div class="text-options">
<i class="toggle-dialog ct icon-picture" title="Upload...">Click</i>
<div class="picture-upload-dialog">
<div class="picture-upload-header">
Upload your picture
</div>
<div class="picture-upload-content">
<input type="file" name="fileToUpload" id="fileToUpload">
<button class="ct icon-picture submit-picture">SEND</button>
</div>
</div>
</div>
<div id="color-picker"></div>
</div>