We Keep Coding

How do I fix problem with 'script.js' not working

Basically one of my scripts work but the other one doesn't. I am trying to customize the play button functions with javascript but whenever I try to load the script it seems like the script has no effect on the video.
I have checked the code itself and even went back to the index.html to see if I made any errors with the tags. I also found out after inspecting the script is not there but it's declared in the index.html.
index.html
<div class="container">
<div class="c-video">
<video class="video" src="stranding.mp4"></video>
<div class="controls">
<div class="orange-bar"></div>
<div class="orange-juice"></div>
<div class="buttons">
<button id="play-pause"></button></div>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="alert.js"></script>
________________________________________________________________________
var video = document.querySelector("video");
var juice = document.querySelector("orange-juice");
var btn = document.getElementById("play-pause");
function togglePlayPause() {
if(video.paused){
btn.className = "pause";
video.play();
} else {
btn.className = "play";
video.pause();
}
}
btn.onclick = funtion() {
togglePlayPause();
};
________________________________________________________
stye.css
.buttons button.play:before {
content: "\fo4b";
}
.buttons button.pause:before {
content: "\f04c";
}
.orange-bar{
height: 10px;
top: 0;
left: 0;
width: 100%;
}
.orange-juice{
height: 10px;
background-color: silver;
}
I want the script to cause the video to play/pause but it doesn't.

You are incorrectly taking the reference of the Play/Pause button.
Instead of:
document.getElementById(".play-pause");
use
document.getElementById("play-pause");

You are using the "." class selector in document.getElementsById
var btn = document.getElementById(".play-pause");
Without seeing the HTML and knowing exactly what is going on, try
var btn = document.getElementById("play-pause");

javascript - join 2 buttons in 1

I have a button that loads an 'iframe' and another one that closes, and I would like to merge the two functions into one button.
I do not know if this is possible.
I would like someone to help me.
<button class="hashtag" id="load">PLAY</button>
<button class="hashtag" onclick="parent.closeIFrame();">STOP</button>
<button class="hashtag" id="load">PLAY</button>
<!--<iframe id="myFrame" scrolling="no" src="https://www.rtp.pt/play/popup/antena3#player_prog" style="width:0;height:0;border:0; border:none;"></iframe>-->
<button class="hashtag" onclick="parent.closeIFrame();">STOP</button>
<script>
function closeIFrame() {
$('#myFrame').remove();
}
</script>
<div id="iframeHolder" style="opacity:0;width:0;height:0;"></div>
<script>
$(function() {
$('#load').click(function() {
$('#iframeHolder').html('<iframe id="myFrame" scrolling="no" style="border:0px;" src="https://example" style="width:0;height:0;border:0; border:none;"></iframe>');
});
});
</script>
Thanks in advance.

So I just made it into one button and changed the text to STOP once its clicked, also toggling a variable keeping track of whether or not the iFrame is loaded. If it is clicked when it says STOP is runs the close function and toggles it back to PLAY.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="hashtag" id="load">PLAY</button>
<div id="iframeHolder" style="opacity:0;width:0;height:0;"></div>
<script>
var loaded = false;
$(function(){
$('#load').click(function(){
if (!loaded) {
$('#load').text("STOP")
$('#iframeHolder').html('<iframe id="myFrame" scrolling="no" style="border:0px;" src="https://example" style="width:0;height:0;border:0; border:none;"></iframe>');
loaded = true;
} else {
$('#load').text("PLAY")
$('#myFrame').remove();
loaded = false;
}
});
});
</script>

Try this solution:
$(document).ready(function(){
$(".play").click(function(){
$(this).toggleClass("play close");
$(".hidden").toggleClass("show hidden");
if($(this).hasClass("close")){
$(this).html("CLOSE");
$("iframe").css({"display" : "block"})
}else{
$(this).html("PLAY");
$("iframe").css({"display" : "none"})
}
});
});
.play{
color: black;
}
.close{
color: red;
}
.hidden{
display: none;
}
.show{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="play">PLAY</button>
<iframe class="hidden"></iframe>
Tell me if it works for you

Opening different iframe depending on different button click

i am trying to open different iframe windows by assigning iframe src to a variable ,
when the page initially loads it should show only two buttons on the page , when i click on the button , an iframe should get loaded depending on which button is pressed , i tried doing something like this to create buttons and creating iframes , but it is not working
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<iframe scrolling="no" src="whatnext">
</iframe>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x = "Hello!";
function showX() {
var whatnext;
if b1.onclick==true
whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;"
elseif b2.onclick=true
whatnext= "http://community.sitepoint.com/" style="border: 0px none; height: 555px; margin-left: -116px; margin-top: -25px; width: 330px;"
}
</script>
and another piece of trial is
<button id="b1">Button 1</button>
<button id="b2">Button 2</button>
<iframe scrolling="no" src="x" style="border: 0px none; height: 1555px; margin-left: -116px; margin-top: -25px; width: 930px;">
</iframe>
<script>
var b1 = document.getElementById('b1'), b2 = document.getElementById('b2');
var x ;
function showX() {
src="https:http://stackoverflow.com";
}
b1.onclick = function() {
x = "http://stackoverflow.com;
showX();
};
b2.onclick = function() {
x = "www.sitepoint.com";
showX();
};
</script>

You just need to change the src attribute of the iframe on click. I added the src to the buttons usind the data attribute.
Here is the example http://jsfiddle.net/8wLm42ns/2/
The HTML
<button class="loadiframe" id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button>
<button class="loadiframe" id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button>
<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">
jQuery
$('.loadiframe').on('click', function(){
var src = $(this).data('src'),
width = $(this).data('width'),
height = $(this).data('height');
$('#frame').css({
width: width,
height: height
}).attr('src', src);
});
For javascript solution try this http://jsfiddle.net/8wLm42ns/3/
The HTML
<div class="loadiframe">
<button id="b1" data-src="http://jquery.com/" data-width="500" data-height="400">Button 1</button>
<button id="b2" data-src="http://sitepoint.com" data-width="650" data-height="350">Button 2</button>
</div>
<iframe id='frame' frameborder="0" scrolling="no" width="500" height="400">
javaScript - add in head section
function iframeChange() {
var buttons = document.querySelector(".loadiframe"),
iframe = document.getElementById('frame');
buttons.addEventListener("click", function (e) {
iframe.src = e.target.dataset.src;
iframe.width = e.target.dataset.width;
iframe.height = e.target.dataset.height;
});
}
window.onload = iframeChange;

Try this solution, at click on a button you load the webpage on a specific iframe, no jquery required.
JSBIN here
http://jsbin.com/gebelatomiya/1/
<!doctype html>
<html>
<head>
<script>
function loadFrame (elm){
var frame1 = document.getElementById('frame1');
frame1.src = elm.dataset.src;
}
</script>
</head>
<body>
<button id="b1" data-src="http://www.w3schools.com" onClick="loadFrame(this)">Button 1</button>
<button id="b2" data-src="http://www.sony.com" onClick="loadFrame(this)">Button 2</button>
<iframe id="frame1" scrolling="no"></iframe>
</body>
</html>

how do I use the same link to "re-hide" previously hidden text via Javascript?

The below code snippet shows the invite code when I click "Invite Code". But how do I re-hide the invite code if the same link is clicked again? And can it be done where it cycles back and forth with subsequent clicks? I didn't write this code but merely modified it to my use. I am still very new to this type of thing. Thanks!
<style>
div.hide { display:none; }
div.show { text-align:center; }
</style>
<script type='text/javascript'>
function showText(show, hide) {
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<br>
<font color="red">-</font>Home<font color="red"> / </font><a onclick="showText('text1')" href="javascript:void(0);">Invite Code</a>-</font>
<div id="text1" class="hide"><font color="red">abc123</font></div>
</center></h3>

Simply use this function:
function showText(id)
{
var elem = document.getElementById(id);
if(elem.style.display == 'none')
{
elem.style.display = 'inline';
}
else
{
elem.style.display = 'none';
}
}
<a onClick="showText('text1');" href="#">Show or Hide</a><br/>
<div style="height: 30px;"><div id="text1" style="display: none;">Text to hide or show... WTF?!</div></div>
<div>This text should not move.</div>
PS: This also works for 2 Elements...
Greetings

I really don't see the use for the show class. You could just toggle the hide class on the elements that you want to toggle.
Assume you dont need the show class, then use the classList.toggle function like this
function toggle(target){
document.getElementById(target).classList.toggle('hide');
}
.hide{ display:none }
<button onclick="toggle('test')">Show / Hide</button>
<div id="test" class="hide">Hello world!</div>

save the state with a boolean
var hided = true;
function showText(show,hide){
if (hided){
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
else{
document.getElementById(show).className = "hide";
document.getElementById(hide).className = "show";
}
hided = !hided;
}
fiddle with this code and some of your html : fiddle,
isn't it the expected behavior ?

<html>
<div ID="content" style="display:block;">This is content.</div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<button onclick="toggleContent()">Toggle</button>
</html>
//Code is pretty self explanatory.

Simple image gallery JS

I'm trying to create a simple image gallery with radio buttons. Images are set to Display: none; by default. What I want is for them to display as block when I click on their respective buttons.
<html>
<head>
<style>
.img { width: 250px;
max-height: 300px;
display: none;
}
</style>
<script>
function picture (a) {
var pic = document.getElementById('image')
if (a == 1) {
pic.src="julia1.jpg"
} else { pic.src="julia2.jpg"}
pic.style.display ="block";
}
</script>
</head>
<body>
<img class="img" id="image" src="julia1.jpg">
<form action="">
<input type="radio" onclick="picture(1)" name="picture"></input>
<input type="radio" onclick="picture(2)" name="picture"></input>
</form>
</body>
</html>
On the browser console it says that object is not a function. What does that mean? (thats for both input tags)

The last line should read
pic.style.display = "block";

If anyone looking for simple js gallery check this example :
https://codepen.io/zarokr/pen/ZEzBYvY
let current = document.getElementById('current');
let thumbnails = document.getElementsByClassName('thumb');
for(let i = 0; i<thumbnails.length; i++){
thumbnails[i].addEventListener('click',changeImage);
}
function changeImage(){
let getsrc = this.getAttribute('src');
current.setAttribute('src',getsrc);
}