I want to take the user input text of an textarea [textBox] and put it on the p [cParagraph]
its working on IE but not on Chrome
function toggleOverlay(){
var overLay = document.querySelector("#overlay"),
modal = document.querySelector("#modal");
if(overLay.style.display !== "block" || modal.style.display !== "block"){
overLay.style.display = "block";
modal.style.display = "block";
}else {
overLay.style.display = "none";
modal.style.display = "none";
}
}
function submitMsg() {
var cHeader = document.querySelector(".cHeader"),
cParagraph = document.querySelector(".cParagraph"),
userName = document.querySelector("#userName"),
textBox = document.querySelector("#textBox");
cParagraph.innerHTML = textBox.innerHTML;
cHeader.innerHTML = userName.value;
toggleOverlay();
}
document.querySelector("#post").addEventListener("click", toggleOverlay,false);
document.querySelector("#submit").addEventListener("click", submitMsg, false);
Related
I'm sure there is a way to write a shorter version of the following js code. In the end I'm just repeating myself over and over again. Any suggestions?
Thanks a lot!
if (designVal == 0 && colorVal == 0) {
design01yellow.style.display = "block";
design01black.style.display = "none";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if (designVal == 0 && colorVal == 1) {
design01yellow.style.display = "none";
design01black.style.display = "block";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if (designVal == 0 && colorVal == 2) {
design01yellow.style.display = "none";
design01black.style.display = "none";
design01blue.style.display = "block";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
} else if
///AND SO ON
Give all the elements a common class (e.g. class="design"). Loop over them, setting them all to none, then set the specific element to block.
document.querySelectorAll(".design").forEach(el => el.style.display = "none");
if (designVal == 0 && colorVal == 0) {
design01yellow.style.display = "block";
} else if (designVal == 0 && colorVal == 1) {
design01black.style.display = "block";
} ...
I'd normalize them to 'display: none' and then only set the one you want to display: block.
if (designVal === 0) {
design01yellow.style.display = "none";
design01black.style.display = "none";
design01blue.style.display = "none";
design01grey.style.display = "none";
design02yellow.style.display = "none";
design02black.style.display = "none";
design02blue.style.display = "none";
design02grey.style.display = "none";
design03yellow.style.display = "none";
design03black.style.display = "none";
design03blue.style.display = "none";
design03grey.style.display = "none";
if(colorVal === 0) {
design01yellow.style.display = "block";
} else if (colorVal === 1) {
design01black.style.display = "block";
} else if (colorVal === 2) {
design01blue.style.display = "block";
}
// and so on
}
This is some JS that I've written, how can this be reduced?
it swaps the text as in hides one div and displays the other.
var directorOne = document.getElementById('directorOne').addEventListener("click", changeText);
var directorOneText = document.getElementById('directorOneText');
function changeText() {
if (directorOneText.style.display === "block") {
directorOneText.style.display = "none";
directorTwoText.style.display = "none";
console.log("luke open");
} else {
directorOneText.style.display = "block";
directorTwoText.style.display = "none";
}
}
var directorTwo = document.getElementById('directorTwo').addEventListener("click", changeText2);
var directorTwoText = document.getElementById('directorTwoText');
function changeText2() {
if (directorTwoText.style.display === "block") {
directorTwoText.style.display = "none";
directorOneText.style.display = "none";
console.log("bruce open");
} else {
directorTwoText.style.display = "block";
directorOneText.style.display = "none";
}
}
Using a single function that is called with the elements as parameters
var directorOneText = document.getElementById('directorOneText');
var directorTwoText = document.getElementById('directorTwoText');
function changeText(t1, t2) {
t1.style.display = (t1.style.display === "block") ? "none" : "block";
t2.style.display = "none";
}
var directorOneClickEvent = document.getElementById('directorOne').addEventListener("click", function(){ changeText(directorOneText, directorTwoText)});
var directorTwoClickEvent = document.getElementById('directorTwo').addEventListener("click", function(){ changeText(directorTwoText, directorOneText)});
#directorOne {background:#333; padding: 20px;}
#directorTwo {background:#ddd; padding: 20px;}
<div id="directorOne">d1<textarea id="directorOneText"></textarea></div>
<div id="directorTwo">d2<textarea id="directorTwoText"></textarea></div>
I am trying to figure out how to make this code significantly cleaner. I've tried multiple things but nothing seems to work.
toggle1.onclick = function() {
var div = document.getElementById('toggle-content1');
if (div.style.display !== 'none') {
div.style.display = 'none';
document.getElementById("arrow1").className = "arrow-right";
}
else {
div.style.display = 'block';
document.getElementById("arrow1").className = "arrow-down";
}
};
toggle2.onclick = function() {
var div = document.getElementById('toggle-content2');
if (div.style.display !== 'none') {
div.style.display = 'none';
document.getElementById("arrow2").className = "arrow-right";
}
else {
div.style.display = 'block';
document.getElementById("arrow2").className = "arrow-down";
}
};
toggle3.onclick = function() {
var div = document.getElementById('toggle-content3');
if (div.style.display !== 'none') {
div.style.display = 'none';
document.getElementById("arrow3").className = "arrow-right";
}
else {
div.style.display = 'block';
document.getElementById("arrow3").className = "arrow-down";
}
};
If anyone has any tips or learning resources that I can look at I would really appreciate some assistance! From what I understand, I need to pull the number somehow and then attach it into the toggle function?
Thank you!
var toggle1 = document.getElementById('toggle-switch1');
var toggle2 = document.getElementById('toggle-switch2');
var toggle3 = document.getElementById('toggle-switch3');
function handler(divId) {
var div = document.getElementById(divId);
div.style.display = div.style.display !== 'none' ? 'none' : 'block';
};
toggle1.onclick = handler.bind('toggle-content1');
toggle2.onclick = handler.bind('toggle-content2');
toggle3.onclick = handler.bind('toggle-content3');
or
var toggle1 = document.getElementById('toggle-switch1');
var switches = {
'toggle-switch1': 'toggle-content1',
'toggle-switch2': 'toggle-content2',
'toggle-switch3': 'toggle-content3',
};
toggle1.parentElement.onclick = function(event) {
if (switches[event.target.id]) {
var div = document.getElementById(switches[event.target.id]);
div.style.display = div.style.display !== 'none' ? 'none' : 'block';
}
}
or you can specify on toggle-switch1 and toggle-switch2 and toggle-switch3 appropriate target names in data-switchTarget attribute, i.e. toggle-content1 for toggle-switch1, toggle-content2 for toggle-switch2 and toggle-content3 for toggle-switchTarget, e.g.:
<div id='toggle-switch1' data-switchTarget='toggle-content1'>...</div>
and code for that will be:
var toggle1 = document.getElementById('toggle-switch1');
toggle1.parentElement.onclick = function(event) {
if (event.target.dataset.switchTarget) {
var div = document.getElementById(event.target.dataset.switchTarget);
div.style.display = div.style.display !== 'none' ? 'none' : 'block';
}
}
upd: you have just updated question, so in that case you can use:
var toggle1 = document.getElementById('toggle-switch1');
var switches = {
'toggle-switch1': {content: 'toggle-content1', arrow: 'arrow1'},
'toggle-switch2': {content: 'toggle-content2', arrow: 'arrow2'},
'toggle-switch3': {content: 'toggle-content3', arrow: 'arrow3'},
};
toggle1.parentElement.onclick = function(event) {
if (switches[event.target.id]) {
var div = document.getElementById(switches[event.target.id].content);
var isDivDisplayed = div.style.display !== 'none';
div.style.display = isDivDisplayed ? 'none' : 'block';
document.getElementById(switches[event.target.id].arrow).className = isDivDisplayed ? 'arrow-right' : 'arrow-down';
}
}
I've a script that gives a button a specific id <button id='myBtn$i'>Open Modal</button>, $i goes with the for loop. With that specific id I should be able to open specific modals with the same $i <div id='myModal$i' class='modal'></div> . With this javascript
<script>
var modal = document.getElementById('myModal$i');
var btn = document.getElementById('myBtn$i');
var span = document.getElementsByClassName('close')[$i];
btn.onclick = function() {
modal.style.display = 'block';
}
span.onclick = function() {
modal.style.display = 'none';
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
</script>
But it doesn't succeed, can anyone help me? Thanks!
Try this:
Declare the variable as a global. And Do with addEventListener()
var modal;
var btn;
var span;
for(var $i=0; $i<23; $i++){
modal = document.getElementById('myModal'+$i);
btn = document.getElementById('myBtn'+$i);
span = document.getElementsByClassName('close')[$i];
btn.addEventListener("click", function() {
modal.style.display = 'block';
})
span.addEventListener("click", function() {
modal.style.display = 'none';
})
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = 'none';
}
}
case FOCUS_AA:
if(keyCode == KEY_RIGHT){
focus = FOCUS_AB;
clearTimeout(a);
document.getElementById("background").style.display = "block";
document.getElementById("backLight").style.display = "block";
document.getElementById("treeBoard").style.display = "block";
document.getElementById("bImg").style.display = "block";
document.getElementById("aImg").style.display = "none";
document.getElementById("a0").style.display = "none";
document.getElementById('banana').play();
banana1();
function banana1(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b0").style.display = "block";
/*var a = setTimeout(apple2, 1000);*/
b = setTimeout(banana2, 1000);
}
function banana2(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b0").style.display = "none";
document.getElementById("b1").style.display = "block";
b = setTimeout(banana3, 1000);
}
function banana3(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b1").style.display = "none";
document.getElementById("b2").style.display = "block";
b = setTimeout(banana4, 1000);
}
function banana4(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b2").style.display = "none";
document.getElementById("b3").style.display = "block";
b = setTimeout(banana5, 1000);
}
function banana5(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b3").style.display = "none";
document.getElementById("b4").style.display = "block";
b = setTimeout(banana6, 1000);
}
function banana6(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b4").style.display = "none";
document.getElementById("b5").style.display = "block";
b = setTimeout(banana7, 1000);
}
function banana7(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b5").style.display = "none";
document.getElementById("b6").style.display = "block";
b = setTimeout(banana8, 1000);
}function banana8(){
document.getElementById("bImg").style.display = "block";
document.getElementById("b6").style.display = "none";
document.getElementById("b0").style.display = "block";
b = setTimeout(banana8, 1000);
}
}else if(keyCode == KEY_BACK){
focus == FOCUS_A
window.location.href = 'Shop.html';
}
break;
case FOCUS_AB:
if(keyCode == KEY_LEFT){
focus = FOCUS_AA;
clearTimeout(b);
document.getElementById("background").style.display = "block";
document.getElementById("backLight").style.display = "block";
document.getElementById("treeBoard").style.display = "block";
document.getElementById("a0").style.display = "block";
document.getElementById("aImg").style.display = "block";
document.getElementById("bImg").style.display = "none";
document.getElementById("b0").style.display = "none";
document.getElementById('apple').play();
apple0();
function apple0(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a0").style.display = "block";
a = setTimeout(apple1, 1000);
}
function apple1(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a0").style.display = "none";
document.getElementById("a1").style.display = "block";
a = setTimeout(apple2, 1000);
}
function apple2(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a1").style.display = "none";
document.getElementById("a2").style.display = "block";
a = setTimeout(apple3, 1000);
}
function apple3(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a2").style.display = "none";
document.getElementById("a3").style.display = "block";
a = setTimeout(apple4, 1000);
}
function apple4(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a3").style.display = "none";
document.getElementById("a4").style.display = "block";
a = setTimeout(apple5, 1000);
}
function apple5(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a4").style.display = "none";
document.getElementById("a5").style.display = "block";
a = setTimeout(apple6, 1000);
}
function apple6(){
document.getElementById("aImg").style.display = "block";
document.getElementById("a5").style.display = "none";
document.getElementById("a0").style.display = "block";
a = setTimeout(apple6, 1000);
}
}else if(keyCode == KEY_RIGHT){
focus = FOCUS_AC;
clearTimeout(b);
document.getElementById('b_').style.display ='none';
document.getElementById("background").style.display = "block";
document.getElementById("backLight").style.display = "block";
document.getElementById("treeBoard").style.display = "block";
document.getElementById("c0").style.display = "block";
document.getElementById("cImg").style.display = "block";
document.getElementById("bImg").style.display = "none";
document.getElementById("b0").style.display = "none";
document.getElementById('cake').play();
cake1();
function cake1(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c0").style.display = "block";
c = setTimeout(cake2, 1000);
}
function cake2(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c0").style.display = "none";
document.getElementById("c1").style.display = "block";
c = setTimeout(cake3, 1000);
}
function cake3(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c1").style.display = "none";
document.getElementById("c2").style.display = "block";
c = setTimeout(cake4, 1000);
}
function cake4(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c2").style.display = "none";
document.getElementById("c3").style.display = "block";
c = setTimeout(cake5, 1000);
}
function cake5(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c3").style.display = "none";
document.getElementById("c4").style.display = "block";
c = setTimeout(cake6, 1000);
}
function cake6(){
document.getElementById("cImg").style.display = "block";
document.getElementById("c4").style.display = "none";
document.getElementById("c0").style.display = "block";
c = setTimeout(cake6, 1000);
}
} else if(keyCode == KEY_BACK){
focus == FOCUS_B
window.location.href = 'Shop.html';
}
break;
this shows using setTimeout to animate the images.
when i press "KEY_RIGHT" : the images stopped and shows next animated image.
but problem is images overlaps with stopped images and the next images.
how do i remove all the stopped or previous images(FOCUS_AA) when key pressed next step(FOCUS_AB)?
If you were to animate via jQuery, you could call .stop() on all animations and have the always action on animations would be to hide the photos. That way, even if you were in the middle of an animation, the animation would stop, go immediately to the end and the next animation would go.