I am working on CS50 Week8 problem set. In the following code, I have a dropdown list and a button, and the link embedded in the latter depends on the former. For some reason the button gets automatically clicked without being intended. Any idea why this is going wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken">1. Interlaken</option>
<option value="hokkaido" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<form>
<button class="p1" type="button" onclick="gotosite(); return false">Confirm!</button>
<script>
var location = document.getElementById("location").value;
function gotosite(){
location.href(location + ".html");
}
</script>
</form>
</div>
</body>
</html>
You need the get the value of the select field when someone clicks on the Submit button not on loading the page so you should keep the value getting logic inside the function.
I have also updated the window.location.href thing, have a look.
This is working snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken.html">1. Interlaken</option>
<option value="hokkaido.html" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<form>
<button class="p1" type="button" onclick="gotosite()">Confirm!</button>
<script>
function gotosite(){
window.location.href = document.getElementById("location").value;
}
</script>
</form>
</div>
</body>
</html>
The button is not being clicked.
<script>
var location = document.getElementById("location").value;
location is a predefined variable in the global scope. You can't redeclare it there. Your assignment is going straight to the existing global location.
Since that line of code is outside of any function, it executes immediately.
It indeed is what Quentin said.
You can fix it by using the code from the example above, or look at my example.
It is a little bit different.
The main difference is that I've placed the script just before the body closes.
And I did not use an onclick attribute on the button.
Instead I used an eventListener attached to your button. I prefer the eventListener as it does not nead to live inside the html.
You can simply create a js file scripts.js (<script src="scripts.js"></script>) and insert this code inside.
The advantage is that you only need to have this code once while you can have the same functionality on multiple pages.
Please note that I've also removed the <form> around the button. The reason for this is that you don't need it. You did add the type="button" which marks this button as simply a button instead of a form submit, so the form won't submit a GET request to itself, but as I've learned years ago; less is more.
Of course there is plenty more to tell and help you with, but I hope this gives you some insight in other ways to fix the same issue.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Justin's Homepage</title>
</head>
<body id="homepage">
<h1 id="welcome">Welcome to Justin's Homepage!</h1>
<p class="p1">Where would you like to travel next?</p>
<select class="p1" id="location">
<option value="interlaken.html">1. Interlaken</option>
<option value="hokkaido.html" selected>2. Hokkaido</option>
<option value="croatia.html">3. Croatia</option>
</select>
<div id="confirm">
<button class="p1" type="button" >Confirm!</button>
</div>
<script>
document.querySelector('button').addEventListener('click', () => {
window.location.href = document.getElementById("location").value
});
</script>
</body>
</html>
Related
Here I'm looking for button side the select option any one can please help on it. i want repeat button and option like this. I have no idea on it i am trying to this but not working please help anyone.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form action="/action_page.php">
<div class="form-group">
<label for="sel1">Select list (select one):</label>
<select class="form-control" id="sel1" name="sellist1">
<button>button1</button>
<option>1</option>
<button>button1</button>
<option>2</option>
<button>button1</button>
<option>3</option>
<button>button1</button>
<option>4</option>
<button>button1</button>
</select>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Sorry to say this but No, you can't put any HTML inside of an option element, just text. You'll need to use either an list element to emulate a select, or use a change-handler on the select element.
You can use grid for this type of functionality..
Or you can use Bootstrap dropdown to achieve such functionality. As far as I know it wont be possible to achieve this in native select component.
Please check this link https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
You can use something like this for this bootstrap dropdown
I am trying to animate a picture when the mouse cursor hovers over it. I am using jQuery to accomplish this. I cannot figure out why it does not work for the current state of my code. Apologies in advance, I just started my endeavour into web development.
Thanks!
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="CSS/animate.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:500&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Daryl N.</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="nav-text"><span id="home">Home</span><span id="archive">Archive</span></div>
</div>
<div id="first" class="background">
<div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div>
</div>
<div id="second" class="background">
<p class="align-vert">This is my personal website</p>
</div>
</div>
</body>
</html>
jQuery
$(document).mousemove(function() {
if($('#me-pic').is(':hover')
{
alert("Hello");
}
});
UPDATE
The source of my problem came from setting the z-index of my image div to -1. Changing this solved my problem, as well as changing the script.
Well, I'm not sure if your method should work or not, but there's a better way to handle this, designed for the original purpose:
$(document).ready(function() {
$('#me-pic').hover(function() {
alert("Hello");
});
});
With jQuery you can attach the hover event directly onto the selector, try this:
$(document).ready(function() {
$('#me-pic').hover(function(){
alert("Hello");
})
});
The solution is to use hover jquery method.
$('#me-pic').hover(function(){
alert("Hello");
})
View reference here.
Further more,I recommend you remove $(document).mousemove() event.In this situation, it is inefficient method.
It's my first time using polymer.And I wanted to import some external scripts, but it's not working...
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="geo-dropdown">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://geotree.geonames.org/jquery.rightClick.js"></script>
<script type="text/javascript" src="http://geotree.geonames.org/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="GeoDropdown.js"></script>
<template>
<!-- entry point (earth ID) -->
<fieldset style="display:none;">
<div id="earth" gid="6295630" class="id_6295630"></div>
</fieldset>
<div>
<select id="continent" name="continent"></select>
<select id="country" name="country"></select>
<select id="adm1" name="adm1"></select>
<select id="adm2" name="adm2"></select>
<select id="adm3" name="adm3"></select>
<select id="adm4" name="adm4"></select>
<select id="adm5" name="adm5"></select>
<input id="submitBtn" type="submit" value="Submit" onclick="getLocation();"></input>
</div>
</template>
<script>
Polymer({
is: "geo-dropdown"
});
</script>
</dom-module>
Can someone help me? I believe that I'm making a stupid error, but I can't find it.
Remove the type="text/javascript".
Best way would be to load the dependency from a different html through import and reuse it again when needed.
Checkout marked-element to handle the scope.
Very hard to guess what the problem is without being told the error, or at least the expected vs actual behaviour... but having said that, the old croney gazing into tea leaves in the corner of my office is murmuring something about putting <script type="text/javascript" src="GeoDropdown.js"></script> after the template tag as it refers to DOM elements that have not come into existence yet... no - she is whispering it wont work... and something about loading it dynamically from the ready property of the Polymer definition object instead... and now she has passed out. Hmph.
I'm trying to understand the Web Components, so I want to create a web component that would "wrap" a select tag into the select2.
Here's my main HTML:
<html>
<head>
<title>Web components</title>
<meta charset="utf-8"></meta>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/select2-select.html"></link>
</head>
<body>
<div>
<select2-select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select2-select>
</div>
</body>
</html>
And my custom element:
<link rel="import" href="../bower_components/polymer/polymer.html"></link>
<polymer-element name="select2-select">
<template>
<select id="main">
<content></content>
</select>
</template>
<script>Polymer({});</script>
</polymer-element>
The problem is, the option tags aren't being inserted in the shadow DOM:
What am I doing wrong? I'm running Firefox on Ubuntu 14.04.2, if it's anyhow relevant.
Thank you very much.
Yeah that happens, the easiest way around it is to use attributes. I've amended your original script to make it work.
Main html:
<html>
<head>
<title>Web components</title>
<meta charset="utf-8"></meta>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/select2-select.html"></link>
</head>
<body>
<div>
<select2-select options='[
{"value":"1","text":"1"},
{"value":"2","text":"2"},
{"value":"3","text":"3"},
{"value":"4","text":"4"}
]'></select2-select>
</div>
</body>
</html>
custom element:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="select2-select" attributes="options">
<template>
<select id="main">
<template repeat="{{option in options}}">
<option value={{option.value}}>{{option.text}}</option>
</template>
</select>
</template>
<script>
Polymer('select2-select', {
publish: {
options: {},
}
});
</script>
</polymer-element>
The first thing I can think of is that JQuery & Select2 are not accessible to the element because you have added them to the global scope. As per The Golden Standard Expressed Dependencies section Web Components should be responsible for their own dependencies.
The other thing to look at is that some HTML elements will only render inside other specific elements. For example - If I add option tags to div, they will not render unless they are wrapped in a select tag.
I have a piece of code which works fine in Angular 1.2 without including Bootstrap, but when I use the selectpicker class of Bootstrap the data binding is not happening. Below is the piece of demo code.
<html ng-app>
<head>
<script src="assets/js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/bootstrap-select.js"></script>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-select.css" rel="stylesheet" />
<link href="assets/css/main.css" rel="stylesheet" />
<link href="assets/css/styles.css" rel="stylesheet" />
</head>
<body>
<div ng-controller='Contact'>
<select class="selectpicker" ng-model='selected_person' ng-options='person.name for person in people'>
<option value="">Choose option</option>
</select>
<br>
Selected name = {{selected_person.name}}
</div>
<br>
<script>
$('.selectpicker').selectpicker();
function Contact($scope){
$scope.people = [
{name:"Abc",number: 65},
{name:"Xyz",number: 75},
{name:"Pqr",number: 85}
];
}
</script>
</body>
</html>
You don't want to have have some jQuery in a file and some AngularJS in another file, usually. If jQuery creates elements etc, they probably won't be picked up by angular.
The correct solution is to use an Angular directive. Here, it looks like somebody made one for you.
angular-bootstrap-select
this is what i got for you, the question asked in stackoverflow the same answer I copied for you see here docs download here