<html>
<body>
<div class = "container">
<audio id="music" src="/music/orgmusic.mp3"type="audio/mpeg"></audio>
<img id="titleimg"src = "images/titleimage.png">
<div class = "gameContainer">
</div>
<div id ="play">Press Spacebar To Return To Main Menu!</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/setup.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<script src="/JS/setup.js" type="text/javascript"></script>
<script src="/JS/global.js" type="text/javascript"></script>
</body>
</html>
JS FILE:
document.getElementById("gameContainer").innerHTML = "hi this is words";
As you can see i have the in-line script set to insert text into my div called "gameContainer" but for some reason it doesn't work.
I know I can just type it in, but I wan't to get it to work through my JS file.
Any ideas on why the text won't insert?
You are do stuff based on Id and you set class in HTML.
<div class = "gameContainer"> // Hear you used class
</div>
In Js you used document.getElementById("gameContainer").innerHTML
<div id="gameContainer"> // Hear you have to used id instead of class
</div>
document.getElementById("gameContainer").innerHTML = "hi this is words";
<html>
<body>
<div class = "container">
<audio id="music" src="/music/orgmusic.mp3"type="audio/mpeg"></audio>
<img id="titleimg"src = "images/titleimage.png">
<div id = "gameContainer"class = "gameContainer">
</div>
<div id ="play">Press Spacebar To Return To Main Menu!</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/setup.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<script src="/JS/setup.js" type="text/javascript"></script>
<script src="/JS/global.js" type="text/javascript"></script>
</body>
</html>
Related
Is it possible to create several text editor cells within a single page? My desired outcome is to have a button that when clicked allows the user to add new cells of code, where the user can write and later run. Similar to Jupyter notebook. The editor itself is imported from the ace.js library.
For that, I think I need some function add_editor(parent_div) that adds a new text editor to a div that is given as a parameter. ( Which I have failed to implement )
My initial thoughts are perhaps to create a shared class for all of the editors and append it to the father div with jQuery, but when I tried using a class instead of an id for the design,the editor won't load.
I'm not so good with handling with the DOM (especially without React), so even if the solution seems obvious to you, it might not to me.
This is last working version of the code that I have so far
<html lang="en">
<head>
<title>ACE in Action</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Define the editor's CSS !-->
<style type="text/css" media="screen">
#editor {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="row">
<!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
<div class="col-9" style="height:200px;">
<div class="container" style="">
<div id="editor">
<!-- the div containing the code, has the id "editor" !-->
def print_something():
print(a)
</div>
</div>
</div>
<div class="col-3">
empty column
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
function configure_editor(){
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.getSession().setUseWrapMode(true);
editor.setShowPrintMargin(false);
}
configure_editor()
</script>
</body>
</html>
Help will be much appreciated!
Edit: I need to solve this in Javascript or Jquery, without React.
A cleaner method is to assign an editor to each instance using your own structure. With jquery:
<div id="instance0"></div><div id="instance1"></div>
<script>
var instances[];
var $rootElement = $('#instance0');
newInstance($rootElement);
var $rootElement = $('#instance1');
newInstance($rootElememt);
function newInstance($rootElement){
var instance = {};
instance.id = $rootElement.attr('id');
instance.$root = $rootElement;
instance.editor = ace.edit($rootElement[0]);
instance.editor.instance = instance;
instances.push(instance);
}
</script>
This gives you a 1 to 1 instance to editor relationship with backpointers. It will save you much angst in the future. You can just flip in sessions and keep the editors static.
I think I have found somewhat of a solution on my own with jQuery, even though it seems messy.
Each time a new editor will be added with increasing ids, i.e : "editor0", "editor1", "editor2", and so on.
Here is the full code
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>ACE in Action</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Define the editor's CSS !-->
</head>
<body>
<div class="row">
<!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
<div class="col-9" style="height:200px;">
<div id="editors_container">
</div>
</div>
<div class="col-3">
<button id="add_editor">Add a new editor</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
existing_editors = [];
$(document).ready(function(){
$("#add_editor").click(function(){
console.log("reached here!")
let editor_id = "editor"+existing_editors.length;
$newDiv = $("<div id="+editor_id+" style=width:100%;height:100%>"+"</div>");
$("#editors_container").append($newDiv);
let editor = ace.edit(editor_id);
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.getSession().setUseWrapMode(true);
editor.setShowPrintMargin(false);
existing_editors.push(editor);
});
});
</script>
</body>
</html>
I am making a basic online editing interface for coursework and i want to use keyboard events. The tab key should insert text, this works, but it should also reduce the size of the text on that line. When I use the getElementById, an error displays saying: Cannot read property 'style' of null. How do I go about this?
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList" id="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
You are missing you id as an attribute to your ul.
Help me please, i have this libs:
<title>Semantic UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
and this is the html code:
<div class="ui container">
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i>
Hello
</div>
<div class="content">
contenido 1
</div>
</div>
</div>
and js:
<script>
$('.ui.accordion').accordion();
</script>
What am I missing to work fine this element ? Am I need some scripts to add ? I have a browser console error:
TypeError: $('.ui.accordion').accordion is not a function. (In '$('.ui.accordion').accordion()', '$('.ui.accordion').accordion' is undefined)
you're script tags have the typo for the attribute src on your script tag. In your example, its spelled scr, so the page is never actually loading your libraries. So change:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
TO:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
You forgot to put accordion module.
Simple add after semantic.min.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/accordion.js"></script>
The problem I have is as the title says. It works on all divs but one!
$(".complete-wrapper-1").hide();
var panelHH = $(".file-select-wrapper").innerHeight;
$(".files-button").hover(function(){
$(".complete-wrapper-1").show();
});
$(".complete-wrapper-1").hover(function(){
$(".file-select-wrapper").stop(1).show().height(0).animate({height: panelHH},500);
}, function(){
$(".file-select-wrapper").stop(1).animate({height: 0},500, function(){
$(this).hide();
});
});
Edit: html.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel = "stylesheet" href="osframe.css">
<link type="text/css" rel = "stylesheet" href="appframe.class.css">
<link type="text/css" rel = "stylesheet" href="icons.css">
<link type="text/css" rel = "stylesheet" href="start-menu.css">
<link type="text/css" rel = "stylesheet" href="menus.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="anos_api_buttons.js"></script>
<script type="text/javascript" src="applications.js"></script>
<script type="text/javascript" src="game_api.js"></script>
<script type="text/javascript" src="ApplicationLoader.js"></script>
<script type="text/javascript" src="MultiPane.js"></script>
<script type="text/javascript" src="front-end.js"></script>
<script type="text/javascript" src="search.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript" src="jqueryFileTree.js"></script>
<noscript>You browser does not support javascript of it may disabled.</noscript>
</head>
<body oncontextmenu="return false;">
<div id = "frameAsWhole">
<div class ="item-frame">
<div class = "box1">
<div class = "infoPane">
</div>
<div class = "area-frame">
<div class = "desktop-box">
<div class = 'info-dropdown'></div>
<table class = "table">
</table>
<div class ="search-r-wrapper">
<div class = "search-part">
Search
</div>
<div class = "recent-part">
Recent Apps
</div>
<div class = "search-results">
</div>
<div class = "recent-results">
</div>
<div class = "downard-arrow"></div>
</div>
<div class = "file-select-wrapper">
<div class = "file-select">
<div class = "folder-select-wrapper">
<div class = "desktop-folder" class = "folder-icon fisize">
<div class="folder-text-side folder-text-side-1">Desktop</div>
</div>
</div>
<div class = "folder-select-wrapper">
<div class = "documents-folder" class = "folder-icon fisize">
<div class="folder-text-side folder-text-side-2">Documents</div>
</div>
</div>
<div class = "folder-select-wrapper">
<div class = "images-folder" class = "folder-icon fisize">
<div class="folder-text-side folder-text-side-3">Images/Videos</div>
</div>
</div>
<div class = "folder-select-wrapper">
<div class = "music-folder" class = "folder-icon fisize">
<div class="folder-text-side folder-text-side-4">Music</div>
</div>
</div>
<div class = "folder-select-wrapper">
<div class = "applications-folder" class = "folder-icon fisize">
</div>
</div>
</div>
<div class = "downard-arrow"></div>
</div>
<div class = "complete-wrapper-1"></div>
</div>
</div>
<div class = "taskbar-wrap">
<div class = "taskbar">
<div class = "files-button">
</div>
<table>
<tr class = "taskbar-items">
</tr>
</table>
<div class = "search-wrapper">
<input type="textarea" class ="search-bar">
</input>
<div class = "computer-search">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS not included
Lines 1 to 5 work but nothing after that does. The rest works if .complete-wrapper-1 is not the div I want .hover(); to work on. Any ideas?
The code nearly works but not 100%. The problem was to do with z-index in my css code and was blocking the element from the mouse so that it would not have anything to run the event. Kind of like if I had x-ray google and tried to crab someones heart with my hand, it obviously wouldn't work.
I am a real beginner at codding in general. I would like to create a website that people can go onto and choose a character of a play we are doing. I would then like to prompt for their full name so that I can create a file in the folder for that button, that is under their name. In that same prompt I would like to type it "/WINNER/" and have that give me back a random name (file name) from that button's folder. I hope that makes scene, and I know that I might be making this overly complicated bet this is that only way I found of doing this. Also sorry if my code looks a little wonky, like I said I am a complete noob.
My index.html
<head>
<title>Check Please | Enter</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<div id="Welcome">
<div id="WelcomeMessage">
<h5 class="redCenter">Welcome to the voting website of</h5>
<h3 class="Musical">'Check Please the Musical'</h3>
</div>
<div id="Enter-Img">
<a href="choice.html">
<img src="images/site/enter.png" width="438" height="241" class="button">
</a>
</div>
</div>
</body>
Then my choice.html
<head>
<title>Check Please | Voting</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<div id="Top">
<h3 class="Musical">Please click on one of the following characters that you believe to be the murderer, and then enter your full name.</h3>
</div>
<div id="Button 1">
<a href="Button 1/Button1.html">
<img src="images/site/Person 1.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 2">
<a href="Button 2/Button2.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 2.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 3">
<a href="Button 3/Button3.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 3.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 4">
<a href="Button 4/Button4.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 4.png" width="438" height="241" class="enter">
</a>
</div>
</body>
And right now I have only tried to mess around with one button (Button1.html):
<head>
<title>Check Please | Thanks and Enjoy</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<script type="text/javascript">
window.onload(Name = prompt("Enter your first and last name below"))
import java.io.PrintWriter;
if(Name == "/WINNER/") {
window.location.replace("http://stackoverflow.com");
}else{
import java.io.PrintWriter;
PrintWriter writer = new PrintWriter(Name + ".txt", "UTF-8");
writer.close();
};
</script>
<div>
<h3 class="Musical">Button 1</h3>
</div>
<div>
</div>
</body>
Thanks for ANY input!!!!!!!
You appear to be writing Java in a JavaScript context. I'll make one thing very clear: JavaScript is not related to Java. They are completely separate languages, and as such you cannot use Java libraries.
Also, you can't write out to any directories using JavaScript. JavaScript runs in the user's browser, which is separate from the server (you cannot access files within directories on the server)