This is not a major issue, but I've never seen the behavior I'm about to describe, and I thought if a group of people could help me understand it, it would be you guys. Basically, when I put a button in a header, my data-ng-click did not fire. When I wrote out the same line again, the click worked fine. My question is basically, am I missing something with my code that causes my issue? I'll go through the steps I've just followed to troubleshoot this;
I have a page, it looks like;
<div data-ng-app="myApp" data-ng-controller="myController">
<h1>Title<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button></h1>
I click the button, the showMe function which is defined in $scope in my controller doesn't alert as I would expect. So, I modify my code;
<div data-ng-app="myApp" data-ng-controller="myController">
Click Me
<h1>Title<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button></h1>
And the alert shows. So, I wonder if it's something to do with my putting the button in header causing some issues for whatever.
<div data-ng-app="myApp" data-ng-controller="myController">
<div class="row">
<h1>Title</h1>
<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button>
</div>
And nothing works. So, I decided to type out the same button again, above the existing button and see if a particular element was causing an issue. I started with button with data-ng-click. Alert fires. I keep adding things back in until I get
<button type="button" class="btn btn-primary pull-right" data-ng-click="showMe()">Click Me</button>
<button type="button" class="btn btn-primary pull-right" data-ng-cliok="showMe()">Click me</button>
And the new button works. So, I delete the new button, the old button doesn't work. I delete the old button, the new button works. I open the file in a text editor and show all characters, nothing out of the ordinary, it's not a result of any copy and paste mistake.
I'm obviously going to leave the new button in place, but if I an explanation is possible, then I would like to try and get one.
So, pixelbits pointed out my issue. On my monitor, the font I was using in the editor makes very little distinction between the c and an o in the word click. Even though I believed myself to have read over the line several times, it wasn't until I went back to look at the line looking for that particular issue that I realized I had just completely overlooked it.
Thank you pixelbits, and thank you guys for taking the time to look.
Related
I'm trying to follow this guide and I'm having a bit of an issue I can't figure out how to fix.
Basically in PassKeys.html you have these 2 following bits of code:
<button class="btn btn-success" onclick='start()'>Add Key</button>
function start(){
$("#modal-title").html("Enter a token name")
$("#modal-body").html(`<p>Please enter a name for your new token</p>
<input type="text" placeholder="e.g Laptop, PC" id="key_name" class="form-control"/><br/>
<div id="res"></div>
`)
$("#actionBtn").remove();
$("#modal-footer").prepend(`<button id='actionBtn' class='btn btn-success' onclick="begin_reg()">Start</button>`)
$("#popUpModal").modal('show')
}
Now I'm no JavaScript expert but I would wager that when I click that button (which I can see in my webpage) a function should run that activates a modal.
In the example provided by the guide things do work exactly that way, but in my application it doesn't seem to, and the code itself is exactly the same.
What could be the cause of that?
The basic premise of this app is like a radio that saves stations to certain channels to be recalled when clicked. I keep getting the index.html:111 Uncaught ReferenceError: saveOne is not defined
at HTMLButtonElement.onclick (index.html:111)
error in the console and also when I mouse over the function in my VSCode i get this error: 'saveOne' is declared but its value is never read.ts(6133)
I've looked everywhere for a while now and can't find any solution or clear explanation as to why it's not working.
Thanks!
//HTML//
sorry I'm new to stack overflow ::facepalm:: I assure you the html is accurate, but I don't understand how to get it to work since im a stack overflow noob.
button onclick="" value="90.1" type="button" id="channel1" class="btn btn-secondary">One /button>
button type="button" onclick="saveOne()" id="save1" class="btn btn-dark save_btns">Save1 /button>
// JS FILE //
let channel1 = document.getElementById("channel1").value
function saveOne(){
let saveChnl1 = current_station.innerHTML
channel1 = saveChnl1
// console.log(channel1) //100.3
return channel1
}
OK there are so many things wrong with your question so I'll help you out.
Firstly, your html is completely invalid as it is missing correct open and close brackets.
button onclick="" value="90.1" type="button" id="channel1" class="btn btn-secondary">One /button>
button type="button" onclick="saveOne()" id="save1" class="btn btn-dark save_btns">Save1 /button>
Should be
<button value="90.1" type="button" id="channel1" class="btn btn-secondary">One</button>
<button type="button" onclick="saveOne()" id="save1" class="btn btn-dark save_btns">Save1</button>
Secondly, if you import your script correctly, you wont get any not defined errors.
Make sure that in your html head tag, you have a script tag with a src attribute like so:
<script src="script.js"></script>
and make sure that the path is correct. For information about html pathing, see HTML File Paths
Lastly, the javascript you provided wasn't valid either, but I'll assume that it uses some kind of global reference.
I want to link my button with another page. I am using the code given below to do so.
<button type="button" value="button text" class="commonBtn"
onclick="location.href='manaliPackages.html'";> View Variations</button>
But it is not working... Why not?
Your code should work just fine
(I'm assuming manaliPackages.html is a file in the same directory as the html file holding your code.)
For example: link/to/your/html/file.html contains the following:
<button type="button" value="button text" class="commonBtn"
onclick="location.href='manaliPackages.html'";> View Variations</button>
Clicking this button would open: link/to/your/html/manaliPackages.html
Also, it is considered bad practice to use inline code, you should consider adding an event listener instead.
Please provide a snapshot of your browser console
I have dug and dug for a few hours today without much luck. My language is PHP and my javascript skills are not that great I am learning.
I have a list of buttons, each with their own value. When the button is pressed I would like for it to send the value of that button to a variable so the right file is loaded.
I know that this has got to be a simple thing but it's beyond me right now.
Code:
<button type="button" id="myButton" onClick="setval('shannen')" class="btn btn-primary cd-btn">VIEW</button>
<button type="button" id="myButton" onClick="setval('fall-features')" class="btn btn-primary cd-btn">VIEW</button>
var content_div = document.getElementsByClassName("cd-panel-content");
$(document).ready(function() {
setValue();
$("#myButton").on('click',setValue)
}) console.log(mysample);
function setValue() {
mysample=null;
var mysample=$("#myButton").val();
var mysample=mysample+".html";
console.log(mysample);
$(".cd-panel-content").load("emails/"+mysample);
When they click it a window opens on the right of the screen displaying an HTML file.
www.jeffcade.com to see the functionality. I have gotten it to work with one variable but then it will not change when a different button is pressed.
You're calling a "setval()" function with one argument, but you've written a "setValue()" function with no arguments. You could try changing your function to:
function setval(mySample) {
mySample=mySample+".html";
console.log(mySample);
$(".cd-panel-content").load("emails/"+mySample);
}
I am new here, so maybe you need to give me some hints about how everything works in this community. I was already reading a lot here on Stackoverflow but finally signed up.
I am designing a small website for a museum near me which is a non-profit organization. They have a huge collection of ammunition and the information is currently available on paper.
I want a website where I can enter a number and the appropiate information is shown. Everything works so far in my test site. (since no internet available there, it should run locally on a android tablet later)
The only problem I have is that the form submit works with the button, but not with the enter key or "open" key on the androids numberpad.
I am also quite new to javascript-coding since I come from electronics and c-programming on microprocessors, so I may have made mistake.
i currently have the iframe in the main page, but i originally wanted it to open up in a modal. It did not work properly, so maybe I may try that later again.
Live demo here: museum.smallfilms.ch/drei
The code for the form is the following:
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer">
<h1>Katalog:</h1>
<p>Mit der Munitionsnummer können hier weitere Informationen zur jeweiligen Patrone angezeigt werden.</p>
<p>
<form onsubmit="searchpage()">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<button type="button" class="btn btn-danger" onclick="searchpage()" id="search">Suchen</button>
</form>
The Javascript code is the following:
function searchpage() {
var num = document.getElementById('num');
var targetFrame = document.getElementById('targetFrame');
if (num.value) {
var page = 'pages/' + (+num.value) + '.html';
targetFrame.setAttribute('src', page);
}
}
If you need more code I can deliver this. Just let me know that you need.
The site is now designed to show something for the numbers 1 and 2.
The whole site uses bootstrap and the sites displayed in the iframe use strapdown.js for easier editing. (We need to digitalize about 900 datasets in the end)
I think it is only a small mistake somewhere but after hours of coding and searching the internet i still did not get the source of the error.
Thanks in advance for any help and hint.
Dabbax
Edit: if it helps, i packed the whole page into a zip... museum.smallfilms.ch/drei/drei.zip
I think that the error comes from the line where you are calling the function searchPage(). I would recommend you to try the line below :
<input type="sumbit" class="btn btn-danger" onclick="searchpage()" id="search" value="Suchen">
In this case, when you press enter, the form will be submitted and call the searchPage function.
On your code for the form, try:
<button type="submit" class="btn btn-danger" onclick="searchpage()" id="search"> Suchen </button>
edit: Shaam's answer can be correct but if you say input then you just trying to make it a look like button with bootstrap, a more proper approach would be input type="button" but in your case you should say that this is a button that submit the form.
That's why you should use button and not input here.
This could be your html:
<form id="searchForm" action="some_url">
<input type="number" pattern="\d*"/min="1" max="9999" id="num" >
<input type="button" value="Suchen" class="btn btn-danger entr" onclick="searchpage()" id="search">
</form>
Now add an event listener to the class entr and submit the form if the key is Enter. So the event listener in jquery like
$('.entr').keypress(function(event) {
if (event.which == 13) { // this is the enter key code
document.getElementById('searchForm').submit();
}
});