Updated code, trying to change the imo number with an onclick but vesslefinder just ignores everything in the onclick. Any advivce? Even when I hard code the imo it doesn't work.
The <a> 'button' link:
<a id="button_mssi_imo" href="#" data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-success btn-xs"><i class="fa fa-truck"></i><p hidden="">9514767!</p> Track </a>
script:
<script>
$(document).on('click', '#button_mssi_imo', function( event )
{
alert('Button Clicked');
var imo_data = $(this).text();
// splits the string to get the imo
var imo_data_split = imo_data.split("!")[0];
var width="700";
var height="500";
var zoom="3";
var imo = imo_data_split;
var click_to_activate=false;
});
</script>
<script type="text/javascript" src="https://www.vesselfinder.com/aismap.js"></script>
I am trying to append some JavaScript into a div when a button is clicked (To use vesselfinder). I can manage to append the start of the script, but the second I start to add var it comes back with the unrecognised expressionmessage.
Could anyone please help me to what I am doing wrong? I have also tried everything on one line that results in the same error:
Here is what I think you wanted based on the code I get from https://www.vesselfinder.com/nl/embed
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var myWrite = document.write, html=[];
document.write=function(str) { // redefine document.write to intercept
html.push(str);
}
$(function() {
$("#myDiv").html(html.join("")); // load into the div of your choice
});
</script>
<script type="text/javascript">
var width="700";
var height="500";
var zoom="3";
var click_to_activate=false;
</script>
<script type="text/javascript"
src="https://www.vesselfinder.com/aismap.js">
</script>
<div id="myDiv"></div>
Loading on click (does not work on SO)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
function writeVessel(imo) {
var script = [];
script.push('<script>');
script.push('var imo = "' + imo + '";');
script.push('var width="700";');
script.push('var height="500";');
script.push('var zoom="3";');
script.push('var click_to_activate=false;');
script.push('<\/script>');
script.push('<script src="https://www.vesselfinder.com/aismap.js"><\/script>');
console.log(script.join("\n"))
var iFrame = window.myIframe; // $("#myIframe")[0];
iFrame.document.write(script.join("\n"));
iFrame.document.close();
}
$(function() {
$(document).on('click', '.button_mssi_imo', function(e) {
e.preventDefault(); // cancel click
var imo = $(this).text().split("!")[0];
writeVessel(imo);
});
});
</script>
</head>
<body>
<a id="button_mssi_imo" href="#" data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-success btn-xs"><i class="fa fa-truck"></i><p hidden="">9514767!</p> Track </a><br />
<iframe id="myIframe" name="myIframe" width="800" height="800" src="about:blank"></iframe>
</body>
</html>
Related
First I edited my Blogger Template HTML.
I added the following script in the footer-1 section:
<script type="text/javascript">
//<![CDATA[
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.select();
});
var copyTextareaBtnb = document.querySelector('.js-textareacopybtnb');
copyTextareaBtnb.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextareab');
copyTextarea.select();
});
//]]>
</script>
Next I added a blog with the following HTML:
<textarea class="js-copytextarea">text needed to copy</textarea>
<button class="js-textareacopybtn">
<img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard">
</button>
<textarea class="js-copytextareab">text 2 needed to copy</textarea>
<button class="js-textareacopybtnb">
<img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard">
</button>
Then I clicked on the first and then second button, nothing is copied.
Place all your code in one place (<div>, for example, or HTML widget).
And for scripts in Blogger use this structure:
<script type="text/javascript">
//<![CDATA[
your js code here
//]]>
</script>
you need to include jQuery for JavaScript. put this code before <head/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="js-copytextarea" id="1" readonly="" style="font-family: courier;">TTTEXTTT</textarea><button class="js-textareacopybtn" data-id="1">CCCOPYYY</button>
<script>
$('.js-textareacopybtn').on('click', function(event) {
var copyTextarea = $(this).data('id');
$('#' + copyTextarea)[0].select();
document.execCommand('copy');
});
</script>
How to create a element that uses javascript without reloading the jquery.js?
I've already load it on layout.
every time, I must load it.
This is my element/contacts.ctp
(entire html)
<script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js">
</script>
<script type="text/javascript" src="js/bootstrap/novo.js">
</script>
<script type="text/javascript">
var id = '1';
$(function(){$(document).on('click', '.btn-add', function(e){
e.preventDefault();
var inpute = '<div class="entradas-'+id+'" hidden></br><select class="form-control" id="tipo." name="abc['+id+'][tipo_id]"><?php foreach($contatotipo as $tipo): ?><option value="<?= $tipo->id; ?>"><?= $tipo->nome; ?></option> <?php endforeach; ?> </select> <input class="form-control" id="contato" placeholder="Preencher" name="abc['+id+'][contato]"> <button class="btn btn-danger btn-remove" id="addcontato" type="button"> <span class="fa fa-minus"></span> </button> </br> </div>';
$(".novas").before(inpute);
$('.entradas-'+id).slideDown('slow');
return id++;
})
.on('click', '.btn-remove', function(e)
{
$(this).closest('div').slideUp();
e.preventDefault();
return false;
});
});
</script>
First, put the custom JavaScript code in a separate file. Then, wrap it inside the $(document).ready() function, like this
$(document).ready(function(){
var id = '1';
$(function(){$(document).on('click', '.btn-add', function(e){
...
}
...
});
This tells jQuery to wait with the code execution until all the elements on the page have been drawn.
Then, load all the scripts in the <head> tag:
<html>
<head>
<script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap/novo.js"></script>
<script type="text/javascript" src="js/your/custom/path.js">
</head>
Make the header the same for all your pages, and you're good to go.
I'm doing a schoolproject, trying to do an list of things you need to buy.
The problem is, i can't write more than one time and add to the list, and i can't figure out why.
(It's nowhere near done.) (i have to diffrent javascript files)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="main.css" type="text/css" rel="stylesheet">
<title>Inköpslista</title>
</head>
<body>
<div id="kol1" class="kol">
<h1>Inköp</h1>
<input type="image" src="img/button.png" alt="Submit" id="storknapp" onclick="klickaKnapp('skriva')"/>
<input type"text" id="skriva" placeholder="Skriv din vara här!"/>
<input type="image" id="knapp" src="pluss.png" alt="Submit"/>
</div>
<div id="kol2">
<ul id="listaavvara"></ul>
</div>
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
</body>
</html>
function laggtill(cool, namnVara) {
var vara = document.createElement("li");
vara.innerText = namnVara;
cool.appendChild(vara);
}
var button = document.getElementById("knapp");
button.onclick = function() {
var skriva = document.getElementById("skriva")
var namnVara = skriva.value;
if(!namnVara|| namnVara =="" || namnVara == " " ){
return false;
}
laggtill(document.getElementById("listaavvara"), namnVara);
};
javascrpit 2:
function klickaKnapp(x){
var skrivrutan = document.getElementById(x), maxH="100px";
if(skrivrutan.style.height == maxH){
skrivrutan.style.height = "0px";
} else {
skrivrutan.style.height = maxH;
}
}
HOPEFULLY YOU KNOW WHAT I MEAN! (my pictures are not here)
Because
var button = document.getElementById("knapp");
button.onclick = function() { ... }
overrides the inline event handler. You need to attach events with addEventListener
button.addEventListener("click", function(){...}, false);
Your example works for me on fiddle: http://jsfiddle.net/7zjb86ab/
So this looks like there is something wrong with your imported scripts
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
Are those the two files with your javascript snippets inside?
You could also try to replace
var button = document.getElementById("knapp");
button.onclick = function() {
with
function addItem() {
and then add the function as onclick attribute like you do with the klickaKnapp function
<input type="image" id="knapp" src="pluss.png" alt="Submit" onclick="addItem()" />
I have a JavaScript function that uses document.write() to write to the page. My issue is that when I click the button to call the function, document.write() replaces what I already had with what I am writing. Is there a way to write text to a specific div from JavaScript?
Here is my HTML code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript.js">
</script>
<script>
// Calling the Google Maps API
</script>
<script>
<!-- JavaScript to load Google Maps -->
</script>
</head>
<body>
<div class="content">
<div id="googleMap"></div>
<div id="right_pane_results">hi</div>this -->
<div id="bottom_pane_options">
<button onclick="todaydate();">Try It</button>
</div>
</div>
</body>
...and my JavaScript code (something I got from the internet just to test):
function todaydate() {
var today_date = new Date();
var myyear = today_date.getYear();
var mymonth = today_date.getMonth() + 1;
var mytoday = today_date.getDate();
document.write("<h1>" + myyear + "/" + mymonth + "/"+mytoday + "/h1">);
}
I would like the text to be right below the button. Any help would be appreciated.
Thanks,
Josh
You should avoid document.write. You'd better put your results to another div:
<div id="bottom_pane_options">
<button onclick="todaydate();">Try It</button>
<div id="results"></div> <!-- Added div ! -->
</div>
Then
function todaydate() {
var today_date=new Date();
var myyear=today_date.getYear();
var mymonth=today_date.getMonth() + 1;
var mytoday=today_date.getDate();
document.getElementById('results').innerHTML ="<h1>" + myyear + "/" + mymonth + "/" + mytoday + "</h1>";
}
As you can see, we're writing the results to the results div with .innerHTML.
Hope this helps. Cheers
HTML Code:
<div id="someclass"></div>
JS:
document.getElementById("someclass").innerHTML="<h1>some thing you want</h1>";
To write into a div do the following:
Step-1: Give div an id or classname
<div id="txt"></div>
Step-2. Use .innerHTML in the function:
document.getElementById('txt').innerHTML="HELLO";
You can simply try this...
<!doctype html>
<html>
<head>
<script type="text/javascript" >
function load() {
var div = document.getElementById('data');
div.innerHTML = div.innerHTML + "Write your New Data" + "<br>";
}
</script>
<body onload="load()">
<div id= "data">
Hello... I am old
</div>
</body>
</html>
I am calling this on onload() function you can call as per your beed
You need to tell Javascript to perform the action onload... Try with this:
<script type ="text/javascript">
window.onload = function sayHi(){
document.getElementById('hi').innerHTML = 'Hi';
};
</script>
then on your HTML:
<span id="hi"></span>
What is the best way to replace
var value = prompt("Enter a URL", "http://www.google.com/");
by a javascript modal (preferably pure javascript, if not possible then jquery)
Thanks!
You will need to change theway you call it, so it now follows event-driven programming style like that:
function prompt(question, callback) {
// here build a modal/form and after form submit:
callback(prompt_value);
}
And then use it like that:
prompt('Enter a URL:', function(result){
// do something with the result:
alert(result);
});
For better alerts, you can use bootboxjs.
For a pure JS modal, you can check ModaliseJS which is compatible with any css classes.
Example of ModaliseJS (change the classes to your design, just keep one .close, .confirm and .cancel as you please) :
<!DOCTYPE html>
<html>
<head>
<title>Modal example</title>
<link href="../../dist/modalise.css" rel="stylesheet">
<script src="../../dist/modalise.js" type="text/javascript">
</script>
<script src="app.js" type="text/javascript">
</script>
</head>
<body>
<h1>Example modal 1</h1><button id="openModal">Show the modal</button>
<div class="mdl mdl-fadein" id="exampleModal">
<div class="mdl-content mdl-slidein">
<center>
<div class="mdl-header mdl-band-primary">
<span class="close">X</span>
<h2>Example modal</h2>
</div>
<div class="mdl-body">
<h3>Content modal</h3>
input data: <input type="text" class="inputdata"><br>
</div>
<div class="mdl-footer mdl-band-primary">
<button class="confirm" onclick="return false">Do
thing</button><button class="cancel" onclick=
"return false">Cancel the thing</button>
</div>
</center>
</div>
</div>
</body>
</html>
Javascript :
var myModal = {}
window.onload = function(){
var btnOpen = document.getElementById('queryData'); // The button to open the modal
// if btnsOpen is not given, you can simply use myModal.show()
// Modalise(id, options);
myModal = new Modalise('exampleModal', {
btnsOpen : [btnOpen]
})
.attach()
.on('onConfirm', function(){
console.log(this.querySelector(".inputdata").value);
});
}