将值从脚本放置到DOM

时间:2018-07-31 14:52:18

标签: javascript html

我必须创建一个下拉列表,并且必须onchange<div>中写入值<p>

这是我的代码。我完全被困住了;也许只有一些提示会完成这项工作。

function beerFunction(beer) {
  var y = beer.value;
  
  return y;
}

function beerChoice() {
  var x = getElementById("paragraf");
  
  x.innerHTML = "So" + y + "is your beer of choice? Interesting facts about " + y + ": ";
}
<h1>Your Fav Beer:</h1>
<select onchange="beerFunction(this)">
  <option>Jelen</option>
  <option>Lav</option>
  <option>Jagodinsko</option>
  <option>Nikšićko</option>
</select>

<br>
<br>

<h2>Answer:</h2>
<p id="paragraf">
  <script>
  </script>
</p>

3 个答案:

答案 0 :(得分:2)

这里有几件事:

(1)::正在更改页面上元素的函数是beerChoice(),对吗?您已经为该函数编写了一个定义,但是您实际上并未执行该函数,因此这些都不会发生。

(2):您将在y中返回beerFunction(),但这恰好是调用beerChoice()函数的最佳时机。您已经拥有用户选择的啤酒,现在需要让页面知道以更改文本。

(3)::由于您在y 内声明了beerFunction() ,因此仅在{{ 1}} -您的beerFunction()函数将无法访问它。正确的方法是改为将其作为参数传递 ,例如beerChoice()

(4):beerChoice(y)必须以getElementById为前缀。您需要将该行更改为document

(5):当我编写代码时,对我个人有帮助的是,要对这些函数进行明确的命名,以它们做什么。这样,当您在脑海中思考下一步需要做什么时,您不需要花费太多时间尝试将其转换为代码,也无需弄清楚“哪个功能再次更改了文本? “ 。如果下一步是“更改啤酒文字”,则可能将函数命名为document.getElementById("paragraf")。同样,如果您也清楚地命名所有变量,就会发现编码容易得多。

changeBeerText()
function onBeerSelectionChange(beer) {
  var beerName = beer.value;
  changeBeerText(beerName);
}

function changeBeerText(beerName) {
  var paragraph = document.getElementById("paragraf");
  paragraph.innerHTML = "So" + beerName+ "is your beer of choice? Interesting facts about " + beerName + ": ";
}

答案 1 :(得分:0)

  1. 在getElementById之前添加Jul 31, 2018 8:41:04 PM org.apache.tomcat.util.digester.SetPropertiesRule begin WARNING: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property 'source' to 'org.eclipse.jst.jee.server:springwebstuck' did not find a matching property. Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: Server version: Apache Tomcat/8.0.53 Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: Server built: Jun 29 2018 14:42:45 UTC Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: Server number: 8.0.53.0 Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: OS Name: Windows 10 Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: OS Version: 10.0 Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: Architecture: amd64 Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: Java Home: C:\Program Files\Java\jdk1.8.0_111\jre Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: JVM Version: 1.8.0_111-b14 Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: JVM Vendor: Oracle Corporation Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: CATALINA_BASE: C:\Users\AshwinPC\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp1 Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: CATALINA_HOME: C:\apache-tomcat-8.0.53 Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: Command line argument: -Dcatalina.base=C:\Users\AshwinPC\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp1 Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: Command line argument: -Dcatalina.home=C:\apache-tomcat-8.0.53 Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: Command line argument: -Dwtp.deploy=C:\Users\AshwinPC\eclipse-workspace\.metadata\.plugins\org.eclipse.wst.server.core\tmp1\wtpwebapps Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: Command line argument: -Djava.endorsed.dirs=C:\apache-tomcat-8.0.53\endorsed Jul 31, 2018 8:41:04 PM org.apache.catalina.startup.VersionLoggerListener log INFO: Command line argument: -Dfile.encoding=Cp1252 Jul 31, 2018 8:41:04 PM org.apache.catalina.core.AprLifecycleListener lifecycleEvent INFO: The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: C:\Program Files\Java\jdk1.8.0_111\bin;C:\WINDOWS\Sun\Java\bin;C:\WINDOWS\system32;C:\WINDOWS;C:/Program Files/Java/jre1.8.0_111/bin/server;C:/Program Files/Java/jre1.8.0_111/bin;C:/Program Files/Java/jre1.8.0_111/lib/amd64;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files\Java\jdk1.8.0_111\bin;C:\ruby\bin;C:\gradle-4.5\bin;C:\grails-3.3.1\bin;C:\Program Files\nodejs\;C:\Program Files\Git\cmd;C:\WINDOWS\System32\OpenSSH\;C:\Users\AshwinPC\AppData\Local\Programs\Python\Python36-32\Scripts\;C:\Users\AshwinPC\AppData\Local\Programs\Python\Python36-32\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Users\AshwinPC\AppData\Local\Microsoft\WindowsApps;C:\Users\AshwinPC\AppData\Roaming\npm;;C:\eclipse;;. Jul 31, 2018 8:41:05 PM org.apache.coyote.AbstractProtocol init INFO: Initializing ProtocolHandler ["http-nio-8080"] Jul 31, 2018 8:41:05 PM org.apache.tomcat.util.net.NioSelectorPool getSharedSelector INFO: Using a shared selector for servlet write/read Jul 31, 2018 8:41:05 PM org.apache.coyote.AbstractProtocol init INFO: Initializing ProtocolHandler ["ajp-nio-8009"] Jul 31, 2018 8:41:05 PM org.apache.tomcat.util.net.NioSelectorPool getSharedSelector INFO: Using a shared selector for servlet write/read Jul 31, 2018 8:41:05 PM org.apache.catalina.startup.Catalina load INFO: Initialization processed in 1057 ms Jul 31, 2018 8:41:05 PM org.apache.catalina.core.StandardService startInternal INFO: Starting service Catalina Jul 31, 2018 8:41:05 PM org.apache.catalina.core.StandardEngine startInternal INFO: Starting Servlet Engine: Apache Tomcat/8.0.53 Jul 31, 2018 8:41:09 PM org.apache.jasper.servlet.TldScanner scanJars INFO: At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this logger for a complete list of JARs that were scanned but no TLDs were found in them. Skipping unneeded JARs during scanning can improve startup time and JSP compilation time. Jul 31, 2018 8:41:09 PM org.apache.catalina.core.ContainerBase startInternal SEVERE: A child container failed during start java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/springwebstuck]] at java.util.concurrent.FutureTask.report(FutureTask.java:122) at java.util.concurrent.FutureTask.get(FutureTask.java:192) at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:945) at org.apache.catalina.core.StandardHost.startInternal(StandardHost.java:871) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:145) at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1410) at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1400) at java.util.concurrent.FutureTask.run(FutureTask.java:266) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) at java.lang.Thread.run(Thread.java:745) Caused by: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/springwebstuck]] at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:162) ... 6 more Caused by: org.apache.catalina.LifecycleException: Failed to start component [org.apache.catalina.webresources.StandardRoot@4a5b3444] at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:162) at org.apache.catalina.core.StandardContext.resourcesStart(StandardContext.java:5016) at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5149) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:145) ... 6 more Caused by: org.apache.catalina.LifecycleException: Failed to initialize component [org.apache.catalina.webresources.JarResourceSet@5496d6b4] at org.apache.catalina.util.LifecycleBase.init(LifecycleBase.java:107) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:135) at org.apache.catalina.webresources.StandardRoot.startInternal(StandardRoot.java:722) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:145) ... 9 more Caused by: java.lang.IllegalArgumentException: java.util.zip.ZipException: invalid LOC header (bad signature) at org.apache.catalina.webresources.AbstractSingleArchiveResourceSet.initInternal(AbstractSingleArchiveResourceSet.java:142) at org.apache.catalina.util.LifecycleBase.init(LifecycleBase.java:102) ... 12 more Caused by: java.util.zip.ZipException: invalid LOC header (bad signature) at java.util.zip.ZipFile.read(Native Method) at java.util.zip.ZipFile.access$1400(ZipFile.java:60) at java.util.zip.ZipFile$ZipFileInputStream.read(ZipFile.java:717) at java.util.zip.ZipFile$ZipFileInflaterInputStream.fill(ZipFile.java:419) at java.util.zip.InflaterInputStream.read(InflaterInputStream.java:158) at sun.misc.IOUtils.readFully(IOUtils.java:65) at java.util.jar.JarFile.getBytes(JarFile.java:425) at java.util.jar.JarFile.getManifestFromReference(JarFile.java:193) at java.util.jar.JarFile.getManifest(JarFile.java:180) at org.apache.catalina.webresources.AbstractSingleArchiveResourceSet.initInternal(AbstractSingleArchiveResourceSet.java:140) ... 13 more Jul 31, 2018 8:41:09 PM org.apache.catalina.core.ContainerBase startInternal SEVERE: A child container failed during start java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost]] at java.util.concurrent.FutureTask.report(FutureTask.java:122) at java.util.concurrent.FutureTask.get(FutureTask.java:192) at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:945) at org.apache.catalina.core.StandardEngine.startInternal(StandardEngine.java:262) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:145) at org.apache.catalina.core.StandardService.startInternal(StandardService.java:441) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:145) at org.apache.catalina.core.StandardServer.startInternal(StandardServer.java:789) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:145) at org.apache.catalina.startup.Catalina.start(Catalina.java:641) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:349) at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:483) Caused by: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost]] at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:162) at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1410) at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1400) at java.util.concurrent.FutureTask.run(FutureTask.java:266) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) at java.lang.Thread.run(Thread.java:745) Caused by: org.apache.catalina.LifecycleException: A child container failed during start at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:953) at org.apache.catalina.core.StandardHost.startInternal(StandardHost.java:871) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:145) ... 6 more Jul 31, 2018 8:41:09 PM org.apache.catalina.startup.Catalina start SEVERE: The required Server component failed to start so Tomcat is unable to start. org.apache.catalina.LifecycleException: Failed to start component [StandardServer[8005]] at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:162) at org.apache.catalina.startup.Catalina.start(Catalina.java:641) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:349) at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:483) Caused by: org.apache.catalina.LifecycleException: Failed to start component [StandardService[Catalina]] at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:162) at org.apache.catalina.core.StandardServer.startInternal(StandardServer.java:789) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:145) ... 7 more Caused by: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina]] at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:162) at org.apache.catalina.core.StandardService.startInternal(StandardService.java:441) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:145) ... 9 more Caused by: org.apache.catalina.LifecycleException: A child container failed during start at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:953) at org.apache.catalina.core.StandardEngine.startInternal(StandardEngine.java:262) at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:145) ... 11 more Jul 31, 2018 8:41:09 PM org.apache.coyote.AbstractProtocol pause INFO: Pausing ProtocolHandler ["http-nio-8080"] Jul 31, 2018 8:41:09 PM org.apache.coyote.AbstractProtocol pause INFO: Pausing ProtocolHandler ["ajp-nio-8009"] Jul 31, 2018 8:41:09 PM org.apache.catalina.core.StandardService stopInternal INFO: Stopping service Catalina Jul 31, 2018 8:41:09 PM org.apache.coyote.AbstractProtocol destroy INFO: Destroying ProtocolHandler ["http-nio-8080"] Jul 31, 2018 8:41:09 PM org.apache.coyote.AbstractProtocol destroy SEVERE: Failed to destroy end point associated with ProtocolHandler ["http-nio-8080"] java.lang.NullPointerException at org.apache.tomcat.util.net.NioEndpoint.releaseCaches(NioEndpoint.java:315) at org.apache.tomcat.util.net.NioEndpoint.unbind(NioEndpoint.java:491) at org.apache.tomcat.util.net.AbstractEndpoint.destroy(AbstractEndpoint.java:896) at org.apache.coyote.AbstractProtocol.destroy(AbstractProtocol.java:551) at org.apache.catalina.connector.Connector.destroyInternal(Connector.java:1023) at org.apache.catalina.util.LifecycleBase.destroy(LifecycleBase.java:292) at org.apache.catalina.core.StandardService.destroyInternal(StandardService.java:589) at org.apache.catalina.util.LifecycleBase.destroy(LifecycleBase.java:292) at org.apache.catalina.core.StandardServer.destroyInternal(StandardServer.java:879) at org.apache.catalina.util.LifecycleBase.destroy(LifecycleBase.java:292) at org.apache.catalina.startup.Catalina.start(Catalina.java:645) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:349) at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:483) Jul 31, 2018 8:41:09 PM org.apache.coyote.AbstractProtocol destroy INFO: Destroying ProtocolHandler ["ajp-nio-8009"] Jul 31, 2018 8:41:09 PM org.apache.coyote.AbstractProtocol destroy SEVERE: Failed to destroy end point associated with ProtocolHandler ["ajp-nio-8009"] java.lang.NullPointerException at org.apache.tomcat.util.net.NioEndpoint.releaseCaches(NioEndpoint.java:315) at org.apache.tomcat.util.net.NioEndpoint.unbind(NioEndpoint.java:491) at org.apache.tomcat.util.net.AbstractEndpoint.destroy(AbstractEndpoint.java:896) at org.apache.coyote.AbstractProtocol.destroy(AbstractProtocol.java:551) at org.apache.catalina.connector.Connector.destroyInternal(Connector.java:1023) at org.apache.catalina.util.LifecycleBase.destroy(LifecycleBase.java:292) at org.apache.catalina.core.StandardService.destroyInternal(StandardService.java:589) at org.apache.catalina.util.LifecycleBase.destroy(LifecycleBase.java:292) at org.apache.catalina.core.StandardServer.destroyInternal(StandardServer.java:879) at org.apache.catalina.util.LifecycleBase.destroy(LifecycleBase.java:292) at org.apache.catalina.startup.Catalina.start(Catalina.java:645) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) at java.lang.reflect.Method.invoke(Method.java:498) at org.apache.catalina.startup.Bootstrap.start(Bootstrap.java:349) at org.apache.catalina.startup.Bootstrap.main(Bootstrap.java:483)
  2. 在您的document.中的返回值附近添加beerChoice()

beerFunction
function beerFunction(beer) {
  var y = beer.value;
  return beerChoice(y);
}

function beerChoice(y) {
  var x = document.getElementById("paragraf");
  x.innerHTML = "So" + y + "is your beer of choice? Interesting facts about " + y + ": ";
}

答案 2 :(得分:0)

您已经关闭。在您的代码中,configure { project -> /* Configuration Mantis */ def properties = project / 'properties' def mantisProject = properties / 'hudson.plugins.mantis.MantisProjectProperty' { siteName(MANTIS_URL) projectId('1') category('General') pattern('"[%ID%]"') linkEnabled('true') regex("[^0-9]?([0-9]?[0-9]?[0-9][0-9][0-9][0-9][0-9])[^0-9]?[^0-9]+.*") regexpPattern { pattern("[^0-9]?([0-9]?[0-9]?[0-9][0-9][0-9][0-9][0-9])[^0-9]?[^0-9]+.*") flags(0) } } 是事件处理程序,但您并未对其进行任何处理。由于change事件将异步调用,因此您需要确保与该事件相关的所有操作均由该处理程序或该处理程序中调用的函数完成。

beerFunction
function beerFunction(beer) {
  var y = beer.value;
  beerChoice(y);//we need to pass the value to the function that will update the dom
}

function beerChoice(y) {
  //getElementById is a method of the document object
  var x = document.getElementById("paragraf");
  x.innerHTML = "So " + y + " is your beer of choice? Interesting facts about " + y + ": ";
}