我将使用javascript来创建一个函数来同时更改背景颜色以及文本 - 基于文本输入的值.我已经改变了背景颜色,但无法设法使文本正常工作.
function changeBackground() {
// The working function for changing background color.
document.bgColor = document.getElementById("color").value;
// The code I'd like to use for changing the text simultaneously - however it does not work.
document.getElementById("coltext").style.color = document.getElementById("color").value;
}
查看上面的代码,document.getElementById("coltext").style.color = x当我输入实际颜色而不是"颜色"值时,文本的代码会起作用.
这是我所指的html(我知道它可怕的优化,但它正在进行中):
<form id="TheForm" style="margin-left:396px;">
<input id="color" type="text" onchange="changeBackground();" />
<br/><input id="submitColor" value="Submit" type="button" onclick="changeBackground();" style="margin-left:48px; margin-top:5px;" />
</form>
<span id="coltext">This text should have the same color as you put in the text box</span>
显然,不幸的是,我不能以这种方式使用代码.但无论如何我都努力尝试,除此之外,我达到了一种无限的复杂性.它应该是解决这个问题的一种简单方法,对吧？
当我点击它时,我想分别关注每个"p"标签,就像输入上的CSS"焦点:"一样.问题是选择器"焦点"不适用于段落,这是一个例子:
HTML
<div id="myDiv">
<p>Some Content 1</p>
<p>Some Content 2</p>
<p>Some Content 3</p>
<p>Some Content 4</p>
</div>
CSS
#myDiv p:focus {background-color:red;}
如何找到替代解决方案才能使其正常工作？
我似乎无法弄清楚如何使用ajax发布.我做了一个愚蠢的形式来尝试它,甚至在将它一直削减到只有两个值之后,仍然无法获得任何工作.我的HTML是这样的:
<html>
<head>
<script type="text/javascript" src="j.js"></script>
<title>Test this<
<body>/title>
</head>
<form name="testForm" onsubmit="postStuff()" method="post">
First Name: <input type="text" name="fname" id="fname" /><br />
Last Name: <input type="text" name="lname" id="lname" /><br />
<input type="submit" value="Submit Form" />
</form>
<div id="status"></div>
</body>
</html>
然后,到目前为止,我的外部JavaScript只是一个函数:
function postStuff(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "processForm.php";
var fn = document.getElementById("fname").value;
var ln = document.getElementById("lname").value;
var vars = …如何使用requirejs调用函数？
这是一个过于简单的问题，但是令人惊讶的是，到目前为止，没有教程或示例能够对我有所帮助。
这是我的html文件中的代码。
...
<script src = "stuff.js"></script>
<button onclick="doStuff(4, 2)";>DoStuff</button>
...
这是我的要求js。
define(["jquery"], function ($) {
function doStuff(a, b) {
//does some stuff
}
});
为什么这不起作用？我收到ReferenceError：doStuff未定义
我想要一个像按钮一样的小图片，可以单击并具有更改主体背景图像的功能。我是一个新手，我正在努力学习。我认为，最简单的方法是将div带一个background-image。我也必须使用非语义网格。
因此，我几乎只有div带有背景图片。如何编写此功能？我敢肯定这真的很容易，我在这里读了20篇主题，但对我来说都没有用
编辑：添加了我的代码
#knapp {
height:50px;
width:50px;
background-image:url(http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png);
background-repeat:no-repeat;
background-size:contain;
position:absolute;
top:90vh;
right:3vw;
}<div id="knapp" class="grid-10 prefix-90"></div>我制作了一个简单的html片段,其中包含:
<a href="#"><div>Something here</div></a>
它显然提醒我div不能在<a>标签内.我使用了div,因为我希望整个盒子(在这种情况下为div)是一个按钮.因此,子类:hover和适当的按钮区域适用于整个框,而不仅仅是文本内部.据我所知,div可用于html5中的标签内.我使用XHTML 1.0 Transitional.有什么我可以替换div以避免代码中的错误？或者我应该将xhtml更改为html5？如果不触及剩下的代码,它会运行良好吗？谢谢.
我有以下HTML：
<input class="button" name="save" onclick="$(this).replaceWith('<img src=http://www.example.com/images/ajax-loader.gif />');" type="submit" value="SUBMIT">
当单击按钮时，表单不再尝试提交，而是将其自身替换为正在旋转的AJAX加载gif，并且不执行任何操作。如果我删除onclick部分，它将提交。
长话短说，这是给客户的，但我不能以
$(function() { $(input[name=save]).on({click:function() { $(this).replaceWith(...); } }); });
为什么替换后仍不提交？我不在e.preventDefault()任何地方。
我有一个相当简单的页面,其中包含侧边栏导航和用于加载内容的iFrame.
我想通过单击侧栏导航中的链接来更改iFrame的内容.我正在使用javascript来更改document.element的源(.src).
我已经阅读了很多文章(StackOverflow)并且代码应该可以工作,但事实并非如此.
下面的代码是我创建的html页面,它包含标签中的JS.
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function getContent{
document.getElementById("contentFrame").src="LoremIpsum.html";
}
</script>
</head>
<body>
<div class="sidebar"><h1>Technical Documentation</h1>
<ul>
<li>Configuration Guides</li>
<li>API Guides</li>
<li><a href="" onclick='getContent()'> LoremIpsum</a></li>
</ul>
<!-- <button onclick="getContent()">Lorem Ipsum</button> -->
</div>
<iframe class="content" id="contentFrame" src="dummy.html">
</iframe>
</body>
在jQuery中,我可以创建一个包含数据的HTML元素:
$('<button onclick="btn()"></button>').data("field", { i: i, j: j }).appendTo("body");
并使用它:
function btn(){
var field = $(this).data("field")
alert(field.i)
}
<button onclick="btn()" data-field= "{ i: thevalueofi, j: tthevalueofj }"></button>
function btn(){
var field = $(this).data("field")
alert(field.i)
} // it doesn't work
如何在JavaScript中使用数据？
在这两种做法之间,哪个更好？
<tr onclick="window.document.location='http://link.com';">
<td>Lorem ipsum.</td>
<td>Lorem ipsum.</td>
<td>Lorem ipsum.</td>
<td>Lorem ipsum.</td>
<td>Lorem ipsum.</td>
<td>Lorem ipsum.</td>
<td>Lorem ipsum.</td>
<td>Lorem ipsum.</td>
要么
<tr>
<td><a href="http://link.com">Lorem ipsum.</a></td>
<td><a href="http://link.com">Lorem ipsum.</a></td>
<td><a href="http://link.com">Lorem ipsum.</a></td>
<td><a href="http://link.com">Lorem ipsum.</a></td>
<td><a href="http://link.com">Lorem ipsum.</a></td>
</tr>
我想只使用JavaScript.
在第一种方式中,我只重复一次链接,但我不使用a,在第二个例子中我使用了很多a并重复链接.
在这里,我正在尝试定义一个名为的HTML属性zerg,并在单击一个段落时显示它,而是在单击它时显示"未定义".我编写的代码有什么问题,这样做的正确方法是什么？
<p onclick = "alert(this.zerg);" zerg = "Why doesn't this work?">Click here!</p>
我了解到，使用onclickHTML被认为是不好的做法。现在，我正在阅读一个React教程。本教程使用<button onClick={shoot}>Take the Shot!</button>。在React中这也被认为是不好的做法吗？如果是，那么“正确”的方法是什么？